Responsive video only

HTML & CSS
1

The way I wrote this code is different in that the cover/jacket image isn’t responsive, only the video itself.

Did I set this up right?

And Is there anything that can be improved?

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jacket {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: url("https://via.placeholder.com/200x200") no-repeat 0 0;
  background-size: cover;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.wrap {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.hide {
  display: none;
}


<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <div class="jacket" title="Play">
          <svg class="play" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
              M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
          </svg>
        </div>
        <div class="wrap hide">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>
2

For the fixed cover/jacket that doesn’t resize, this would be an improvement

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #000000;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jacket {
  position: relative;
  width: 180px;
  height: 180px;
  margin: auto;
  cursor: pointer;
  background: url("https://i.scdn.co/image/fe6076b92ee8d20545c47124d3cc29ff049cd738") no-repeat 0 0;
  background-size: cover;
  border-radius: 4px;
  border: 3px solid red;
  box-sizing: border-box;
}

.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 70.3px;
  height: 70.3px;
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.wrap iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.wrap {
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  right: 0;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  margin: auto;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.hide {
  display: none;
}


<div class="outer">
  <div class="tcell">
    <div class="jacket" title="Play">
      <svg class="play" width="88.2" height="88.2" viewBox="0 0 32 32">
        <path d="M4.1,10.8C5.9,6.6,10,3.5,14.8,3.1v-3C8.6,0.5,3.5,4.4,1.2,9.9L4.1,10.8z" />
        <path d="M17.2,3.1c4.8,0.5,8.8,3.5,10.7,7.8l2.9-0.9c-2.3-5.4-7.4-9.3-13.5-9.8V3.1z" />
        <path d="M28.7,13.2C28.9,14.1,29,15,29,16c0,3.9-1.7,7.3-4.4,9.7l1.8,2.4C29.8,25.2,32,20.9,32,16
          c0-1.3-0.2-2.5-0.5-3.7L28.7,13.2z" />
        <path d="M22.6,27.2C20.7,28.3,18.4,29,16,29s-4.7-0.7-6.6-1.8l-1.8,2.4c2.4,1.5,5.3,2.4,8.4,2.4
          s5.9-0.9,8.4-2.4L22.6,27.2z" />
        <path d="M7.4,25.7C4.7,23.3,3,19.9,3,16c0-1,0.1-1.9,0.3-2.8l-2.9-0.9C0.2,13.5,0,14.7,0,16
          c0,4.9,2.2,9.2,5.6,12.2L7.4,25.7z" />
        <polygon  points="12.4,9.5 12.4,22.5 21.6,16 " />
      </svg>
    </div>
    <div class="video-wrapper hide">
      <div class="ratio-keeper">
        <div class="wrap ">
          <div class="video video-frame" data-id="M7lc1UVf-VE"></div>
        </div>
      </div>
    </div>
  </div>
</div>
.
3

Yes no need to place it absolutely now.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.