Adding 2 Videos With 2 Curtains

asasass · August 27, 2021, 1:06pm

This is my goal.

To Add 2 Videos with 2 Curtains: How Would the css / html of each look?

My Attempts: Did I make any mistakes?

The CSS just needs to be added in for the 2nd video.

Code 1

With this CSS, how would that look adding in a 2nd Video With Curtain?

This CSS is only set up for 1 video with curtain.

.outer {}

.containera,
.containerb,
.containerc {}

.containera,
.containerb {}

.playa,
.playb {}

.playa {}

.playb {}

.curtain {}

.panel-left,
.panel-right {}

.panel-left {}

.panel-right {}

.panel-left::before,
.panel-right::before {}

.panel-right::before {}

.curtain.slide .panel-left {}

@keyframes curtain1 {}

.curtain.slide .panel-right {}

@keyframes curtain2 {}

.ratio-keeper {}

.video-frame {}

<div class="outer">
  <div class="containera hide">
    <div class="curtain">
      <div class="ratio-keeper">
        <div class="wrap">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <!-- end container -->

  <div class="containerb hide">
    <div class="curtain2">
      <div class="ratio-keeper2">
        <div class="wrap2">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-left2"></div>
        <div class="panel-right2"></div>
      </div>
    </div>
  <!-- end container -->

  <div class="containerb">
    <svg class="playa" width="100%" height="100%" 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>

    <svg class="playb " width="100%" height="100%" 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>
  <!-- end container -->
</div>

Code 2

With this CSS, how would that look adding in a 2nd Video With Curtain?

This CSS is only set up for 1 video with curtain.

.outer {}

.container {}

.container.active {}

.container.active .thePlay {}

.inner-container {}

/* when container is active hide the svg and show the inner container*/

.playa,
.playb {}

.playa {}

.playb {}

.curtain {}

.panel-left,

.panel-right {}

.panel-left {

  .panel-right {}

  .panel-left::before,

  .panel-right::before {}

  .panel-right::before {}

  .container.active .curtain .panel-left {}

  @keyframes curtain1 {}

  .container.active .curtain .panel-right {}

  @keyframes curtain2 {}

  .ratio-keeper {}

  .video-frame {}

My html Attempt:

<div class="outer">
  <div class="containera with-curtaina">
    <svg class="playa thePlay " width="100%" height="100%" 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 class="inner-containera curtaina">
      <div class="ratio-keepera">
        <div class="wrapa">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-lefta"></div>
        <div class="panel-righta"></div>
      </div>
    </div>
  </div>

  <!-- end container -->
  <div class="containerb with-curtainb">
    <svg class="playb thePlay " width="100%" height="100%" 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 class="inner-containerb curtainb">
      <div class="ratio-keeperb">
        <div class="wrapb">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-leftb"></div>
        <div class="panel-rightb"></div>
      </div>
    </div>
  </div>
  <!-- end container -->
</div>

PaulOB · August 27, 2021, 3:59pm

If you use the last example I gave you you don’t need to do anything at all. It can just be duplicated with the new player.

The js for the player needs to be configured properly though but the html and css structure can just be repeated ad nauseam. No extra class and no multiple references needed.

asasass · August 27, 2021, 4:02pm

But what if each will house a different video, and each curtain would have a different image?

Like that?

.curtaina,
.curtainb{
}

.ratio-keepera,
.ratio-keeperb{
}

I understand the js part, that would need to be set up to play a different video in each.

PaulOB · August 27, 2021, 4:19pm

Simple


    <div class="inner-container curtain curtain1">
  etc....
    <div class="inner-container curtain curtain2">

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url(anotherImage.jpg);
}

asasass · August 27, 2021, 4:21pm

I understand that now.
I think…
I’ll probably still get confused somewhere.

PaulOB · August 27, 2021, 5:06pm

I added the 2 images to here:

You can add as many images as you like just increment the class in the html and change that css.

e.g.

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  background-image: url(yetanotherImage.jpg);
}

asasass · August 27, 2021, 5:15pm

Thank you for that, appreciated.

asasass · August 27, 2021, 5:23pm

In your html you have 1 too many div tags.

<!-- end container -->
</div>

In your code your missing the line next to the right triangle thing.
.6z" />

I spotted it in jsfiddle, guess those errors don’t come up in codepen.

This is wrong:

    <svg class="playa thePlay" width="100%" height="100%" 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>

This is right:

    <svg class="playa thePlay" width="100%" height="100%" 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>

asasass · August 27, 2021, 5:52pm

I was able to get 2 videos showing here:

https://jsfiddle.net/L6yp4mbg/1/

function onYouTubeIframeAPIReady() {
    loadPlayer({
        height: 207,
        start: 4,
        target: ".playa",
        width: 277
    });
    loadPlayer({
        height: 207,
        target: ".playb",
        width: 277
    });
}

PaulOB · August 27, 2021, 6:22pm

No those sort of errors don’t show in codepen (although I should have noticed) and was because of the quick copy and paste.

I’m away for a week now so someone else will have to jump in unless its something I can see on my phone (but fiddles and codepens don’t work very well on a mobile).

asasass · August 27, 2021, 6:30pm

What about these.

Do those show up good on your phone?

JSitor
https://jsitor.com/G2CXL-ZLs

PaulOB · August 27, 2021, 7:22pm

Better than jsfiidde

asasass · August 28, 2021, 12:59am

Remove the scss from the code:
https://jsitor.com/Z7Q_-ulDN

Everything is uneven now.

This is the simplified version.

New code has a few issues:

1st: Aren’t these duplicates?
.container.active .thePlay {

/* when container is active hide the svg */
.container.active .thePlay {
  display: none;
}

.inner-container {
  display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}

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

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.container {
  display: flex;
  justify-content: center;
}
.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
}
/* when container is active hide the svg */
.container.active .thePlay {
  display: none;
}

.inner-container {
  display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}
.container.active .inner-container {
  display: flex;
}
.container.active .inner-container.curtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.playa,
.playb {
  margin: auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.playa {
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.playb {
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%;
}
.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px); /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/id/26/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
  }
}

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

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

.hide {
  display: none;
}

<div class="outer">
	<div class="container with-curtain">
		<svg class="playa thePlay" width="100%" height="100%" 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 class="inner-container curtain curtain1">
			<div class="ratio-keeper">
				<div class="wrapa">
					<div class="video video-frame" data-id="qe5WF4qCSkQ"></div>
				</div>
				<div class="panel-left"></div>
				<div class="panel-right"></div>
			</div>
		</div>
	</div>

	<div class="container with-curtain">
		<svg class="playb thePlay " width="100%" height="100%" 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 class="inner-container curtain curtain2">
			<div class="ratio-keeper">
				<div class="wrapa">
					<div class="video video-frame" data-id="2VwsvrPFr9w"></div>
				</div>
				<div class="panel-left"></div>
				<div class="panel-right"></div>
			</div>
		</div>
	</div>
</div>

PaulOB · August 28, 2021, 6:41am

Yes that was a copy and paste error in my rush to post before I left. Just remove the first one.

The second issue is the one I already told you about with the 100% height on html and body being corrupt in that editor.

Delete the HTML and body rules and retype it making sure there are no characters before it.

You can see my codepen is working so there is something wrong with yours.

asasass · August 28, 2021, 6:43am

Fixed:
https://jsitor.com/Z7Q_-ulDN

asasass · August 28, 2021, 6:48am

What would I do if I wanted to add a 2nd gradient background to go with .playb?

Right now this one is on both of them.

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),


<div class="container with-curtain"></div>
<div class="container with-curtain"></div>

PaulOB · August 28, 2021, 6:52am

Just add a new class to the .container for that one and then use the new class to supply the background.

.playbcontainer.active{
New gradient code here ……
}

Don’t remove any of the other classes.
That’s the best I can type on mobile.

asasass · August 28, 2021, 6:59am

.playb.container {
New gradient code here
}

asasass · August 28, 2021, 7:01am

If container is already hidden by default.

.container.active [}

Is this redundant?

.inner-container {
    display: none;
}

PaulOB · August 28, 2021, 7:39am

Nearly. You missed the active class from the end.

None of the containers are hidden by default otherwise you wouldn’t see the red or blue buttons

Only the inner-containers are hidden by default and only shown when the parent is active.

By adding the active class to the container we can manipulate all the inner elements with that single class. I.e.Show the gradient, hide the play button, show the inner container and slide the curtain. All done neatly with one class.