Video as a pop up instead of an image

HTML & CSS
21

I already gave you that. Just add it to the body: body{padding:50px 8px}

1 Like
22

That does not work for the pop up though.

I would still need to do this?

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  position: fixed;
  padding: 8px 8px;
}
23

Yes the modal isnā€™t affected by the body padding.

24

Why z-index: 99;

When all is needed is 1?

Can you provide an example where 99 is needed?

.modal.open {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 8px 8px;
  position: fixed;
  /* Stay in place */
  z-index: 99;
}
25

Just in case you put other z-index in there at a later date. With modals you always want them on top so best to give a high z-index and possibly avoid issues later on.

1 Like
26

Can you show me this transition code: https://jsfiddle.net/39q0s24g/1/

Working on this first video: https://jsfiddle.net/ca5rLqhf/1/

<div id="myModal" class="modal open">
  <div class="modal-content">
    <div class="blog-pager close">
      <a title="Exit" aria-label="Close"></a>
    </div>
    <div class="ratio-keeper">
<div id="youtubePlayer" ></div>
    </div>
  </div>
</div>

I was trying to figure it out.

27

Youā€™d probably have to do something like this:

function onPlayerReady(event) {
  player = event.target;
  player.setVolume(100);
  shufflePlaylist();
  createResetHandler();
  fadeInModal();/* added this*/
}
/* added this function below */
function fadeInModal() {
  const video = document.querySelector(".modal-content iframe");
  video.addEventListener("load", function() {
    video.style.opacity = 1;
  });
}

Added this css:

.modal-content iframe{
  opacity:0;
  transition:opacity 4s;
}

Of course on my old computer (as I am away) it takes a while before that video loads. That fiddle is so slow I can hardly use it on my slow system.

1 Like
28

How would this be written, so that, both fades are controlled separately?

Currently .ratio-keeper is controlling both fades.

https://jsfiddle.net/ezsth409/7/

const videos = document.querySelectorAll(".ratio-keeper iframe");
videos.forEach(function(video) {
  video.addEventListener("load", function() {
    video.style.opacity = 1;
  });
});

function fadeInModal() {
 const video = document.querySelector(".modal-content iframe");
  video.addEventListener("load", function() {
    video.style.opacity = 1;
 });
}

.modal-content iframe {
  opacity: 0;
  transition: opacity 1s;
}

.ratio-keeper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 10s;
  /* This will animate the opacity change */
}

It is written so that, clicking modal launches and fades in 4 videos.

    <div id="myModal" class="modal open">
      <div class="modal-content">
        <div class="blog-pager close">
          <a title="Exit" aria-label="Close"></a>
        </div>
        <div class="ratio-keeper">
          <div id="youtubePlayer"></div>
        </div>
      </div>
    </div>


    <div class="container">
      <div class="ratio-keeper">
        <iframe id="video1" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <iframe id="video2" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <iframe id="video3" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <iframe id="video4" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>
    </div>

    <script>
      // Function to set the source of the YouTube videos
      function setVideoSource() {
        document.getElementById('video1').src = 'https://www.youtube.com/embed/1Q1aDAnBsU8';
        document.getElementById('video2').src = 'https://www.youtube.com/embed/AzDCFESSfu0';
        document.getElementById('video3').src = 'https://www.youtube.com/embed/EMVeNlu5Olk';
        document.getElementById('video4').src = 'https://www.youtube.com/embed/OTK6hAMRg7w';
      }

      // Event listener to trigger the video source setting
      document.getElementById('myModal').addEventListener('click', setVideoSource);

    </script>
29

This worked:

https://jsfiddle.net/r9co0v74/2/

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

.ratio-keeperInitial iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.5s;
  /* This will animate the opacity change */
}



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

.ratio-keeper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.5s;
  /* This will animate the opacity change */
}
30

Try using

*:not(.modal-content) .ratio-keeper iframe {}

As the selector in the css and js for your current .ratio-keeper Iframe rules.

31

No need to repeat all the same styles. Use a comma separated list and just restate the animation timing as that is the only difference.

32

What if they would be different though?

33

As I said above you just restate the differences only.

e.g.

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

.ratio-keeper iframe,
.ratio-keeperInitial iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ratio-keeper iframe {transition: opacity 2.5s;}
.ratio-keeperInitial iframe {transition: opacity 3.5s;}

A saving of 50% in code and much more easy to read and understand. It keeps the code in one place and means that if you were changing any of those styles you wouldnā€™t forget to do it for the other one.

2 Likes
34

Not using fade in of the iframe here.

1) I need to fix the close button on here, it is not visible.

https://jsfiddle.net/2r90he41/3/


2) Next, I want to add a loading screen that appears over the entire body.

(Loading screen here) - which would just disappear after a few seconds.

Just giving enough time for the modal to be loaded on the screen.

It could just be left as a background color.

Maybe Iā€™ll place an svg or an image or something on it.

For now it could just be left as a background color.

    <div id="myModal" class="modal open">
    <div class="modal-content">
      <div class="blog-pager close">
        <a title="Exit" aria-label="Close"></a>
      </div>
      <div class="ratio-keeper">
        <div class="video"></div>
      </div>
    </div>
  </div>

3) Next, I want to add a loading screen that appears over the entire body.

(Loading screen here) - which would just disappear after a few seconds.

It could just be left as a background color.

It would appear after modal is clicked.

Just giving enough time for the videos to be loaded on the screen.


<div class="container">
    <div class="ratio-keeper">
      <iframe id="video1" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
  <div class="container">
    <div class="ratio-keeper">
      <iframe id="video2" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
  <div class="container">
    <div class="ratio-keeper">
      <iframe id="video3" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
  <div class="container">
    <div class="ratio-keeper">
      <iframe id="video4" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
35

Isnā€™t that the same as question 2 ?

Iā€™m on a mobile at the moment so wonā€™t offer code but you could cover the whole body using body:before{} and cover the whole viewport using position:fixed with top left right and bottom set to zero. Then use a solid background colour (or background image) to cover the content. You will need a z-index higher than anything else on the page.

Then to remove the background you will need to check when the videos have loaded which I think you already do here for one video:

You could use the routine that checks if all videos have loaded and add a new class to the body. Then use css on that class to remove or fade-out the overlay.

e.g. body.overlay:after{display:none}

Youā€™ve done similar before so have a try and see how far you get.

36

Thatā€™s because the modal is overflow hidden and anything outside the video is hidden.

You can try removing overflow:hidden from .modal-content or increase the size so that the X can fit in the modal (although that will offset the video).

37

Hereā€™s a rough version using a loader element instead of the body.

Be aware this was taken from one of the previous non working demos so all of interest in this example is the loader.

<div id="loader">
   <div class="loader">Loading...</div>
</div>


#loader {
  position:fixed;
  z-index:999;
  inset:0 0 0 0;
  background:red;
  opacity:1;
  transition:opacity 5s;
}
#loader.remove-overlay{
  opacity:0;
  pointer-event:none;
}


/*Spinner borrowed from:
https://projects.lukehaas.me/css-loaders/
*/
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
    position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


var allVids = 0;
function onPlayerReady(event) {
let allLoaded = players.length;
  allVids ++;
  player = event.target;
  player.setVolume(100);
  //createResetHandler(player);
  if (allVids === allLoaded){
  document.querySelector('#loader').classList.add('remove-overlay')
  }
}

function onPlayerStateChange(event) { 
etc...

Whether thatā€™s the best way to do it is another question :slight_smile:

38

It should be on top, not inside.

Would I be able to place it on there somewhere else?

<div class="blog-pager"></div>

<div id="myModal" class="modal open">
    <div class="modal-content">
      <div class=" close">
        <a title="Exit" aria-label="Close"></a>
      </div>
      <div class="ratio-keeper">
        <div class="video"></div>
      </div>
    </div>
 </div>
39

Iā€™ve no idea what you are referring to?

The loader is on top of everything in my example. I donā€™t know what you are seeing?

40

Or were you referring to the X close button?

I already gave suitable solutions for that.