How would I apply this background to each of the 5 videos?

Background
https://jsfiddle.net/rud3co8s/

The videos don’t seem to fit properly inside the background.
Maybe the css might need some tweaking.

5 Videos are in here: https://jsfiddle.net/37xLdjn0/

I’m not sure I set up the css properly.

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

body {
  background: white;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  display: flex;
  padding: 8px 8px;
}

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  min-width: 155px;
  position: relative;
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 100px;
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}

.embed-youtube.five {
  margin-bottom: 0;
}

.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 1;
}

/*.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: default;
}*/

.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}

.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  z-index: 1;
}

.embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.embed-youtube-play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.embed-youtube-play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

Desired result.


For better clarity, the entire css originally looked like this: https://jsfiddle.net/pgntmxjk/

.embed-youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
  width: 68px;
  height: 48px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.embed-youtube .embed-youtube-play:hover {
  background-color: #f00;
}

You would need the curtain around each video I believe.

<div class="container">
  <div class="curtain">

    <!-- 1. Video Wrapper Container -->
    <div class="embed-youtube" data-video-id="djV11Xbc914">
      <!-- 2. The preview button that will contain the Play icon -->
      <button class="embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
  </div>

  <div class="curtain">
    <!-- 1. Video Wrapper Container -->
    <div class="embed-youtube" data-video-id="djV11Xbc914">
      <!-- 2. The preview button that will contain the Play icon -->
      <button class="embed-youtube-play" type="button" aria-label="Open"></button>
    </div>
  </div>
</div>

You seem to have left out the before and after code for the curtain also. It also looks like you want them stacked vertically so the container and flex code needs to change.

This is very quick and rough but gets the elements in place.


.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  padding: 8px 8px;
}

.curtain {
  margin:auto  auto 50px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}

.embed-youtube { etc....

Whether or not the youtube code is the same as your original code is up to you to tweak as required but the rough outline is in place in the above code.

I did this: https://jsfiddle.net/bugqzayk/2/

Added ratio-keeper.

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.embed-youtube {
  background-color: #000;
  margin-bottom: 100px;
}
<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">

      <!-- 1. Video Wrapper Container -->
      <div class="embed-youtube" data-video-id="djV11Xbc914">
        <!-- 2. The preview button that will contain the Play icon -->
        <button class="embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
  <div class="curtain">
    <div class="ratio-keeper">
      <!-- 1. Video Wrapper Container -->
      <div class="embed-youtube" data-video-id="djV11Xbc914">
        <!-- 2. The preview button that will contain the Play icon -->
        <button class="embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
  </div>
</div>

In the demo you linked to you already added that to the youtube embed here.

.embed-youtube {
  background-color: #000;
 /* margin-bottom: 100px;*/
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}

The only thing I changed was the margin-bottom as that needs to be on the curtain.

This was the css in that demo with my changes.

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

body {
  background: white;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  padding: 8px 8px;
}

.curtain {
  margin:auto  auto 50px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #0a0a0a;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}

.embed-youtube {
  background-color: #000;
 /* margin-bottom: 100px;*/
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}

.embed-youtube.five {
  margin-bottom: 0;

}

.embed-youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 1;
}

/*.embed-youtube img,
.embed-youtube .embed-youtube-play {
  cursor: default;
}*/

.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
  position: absolute;
}

.embed-youtube iframe {

  height: 100%;
  width: 100%;
  top: 0;
  left: 0;


}

.embed-youtube .embed-youtube-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid blue;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);

  z-index: 1;

}

.embed-youtube-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid blue;
  transform: translateX(4px);
}

.embed-youtube-play:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.embed-youtube-play:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

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