How to make YouTube popup with vanilla JS?-CodePudding

Hey I try to make youtube iframe video pop up when you click "Watch Demo Video" but nothing is going on. It must be youtube iframe, when you click the video shows up. I also added the close button when video shows up. I don't know where I make mistake, is it js or even html

HTML:

`<div >
            <img  src="./images/Ellipse 1.png">
                <img src="/images/Icon (double click to edit).png" alt="play">

                <a href="#" ><p>Watch Demo <br>Video</p></a>
                <div >
                    <iframe  width="560" height="315" src="https://www.youtube.com/embed/6dNho0h_yQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    <div >
                        <img src="/images/close button.png">
                    </div>
                </div>
            <img  src="./images/Line ``4.png">
            </div> 
        </div>`

CSS:

`.btn {
    text-decoration: none;
    z-index: 10;
}

.video-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

.video-container .close {
    position: absolute;
    top: 10%;
    right: 25px;
    cursor: pointer;
}

.video-container .video {
    width: 90%;
    max-width: 800px;
    transform: scale(0);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.3s;
}

.vide-container .show {
    pointer-events: all;
    opacity: 1;
}

.video-container .show .video {
    transform: scale(1);
}`

JS:

`const btn = document.querySelector('.btn');
const videoContainer = document.querySelector('.video-container');
const close = document.querySelector('.close');

btn.addEventListener('click', () => {
    videoContainer.classList.add('show');
});

close.addEventListener('click', () => {
    videoContainer.classList.remove('show');
});`

CodePudding user response：

I see lots of typo mistakes.
Try this:

.video-container.show {
    ...
}


.video-container.show .video {
    ...
}

instead of

.vide-container .show {
    ...
}


.video-container .show .video {
    ...
}

You should check this page for more about CSS-Selectors:
https://www.w3schools.com/cssref/css_selectors.php

CodePudding user response：

Welcome to Stack,

The first problem is the class .vide-container .show is spelt incorrectly so it never selects the element, should be .video-container.show

.vide-container .show {
    pointer-events: all;
    opacity: 1;
}

The second problem is that you are not selecting the element correctly that you want to display

.video-container .show .video {
    transform: scale(1);
}

The selectors .video-container and .show should not have a space between them, this means that the classes are on the same element. So it should be .video-container.show .video

Ive included a stackblitz here so you can see the working example: https://stackblitz.com/edit/js-tmzxem?file=index.html,index.js,style.css

The working code is as follows:

const btn = document.querySelector('.btn');
const videoContainer = document.querySelector('.video-container');
const close = document.querySelector('.close');

console.log('btn: ', btn);

btn.addEventListener('click', () => {
  videoContainer.classList.add('show');
});

close.addEventListener('click', () => {
  videoContainer.classList.remove('show');
});

.btn {
  text-decoration: none;
  z-index: 10;
}

.video-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.video-container .close {
  position: absolute;
  top: 10%;
  right: 25px;
  cursor: pointer;
}

.video-container .video {
  width: 90%;
  max-width: 800px;
  transform: scale(0);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s;
}

.video-container.show {
  pointer-events: all;
  opacity: 1;
}

.video-container.show .video {
  transform: scale(1);
}

<div >
<img  src="./images/Ellipse 1.png">
    <img src="/images/Icon (double click to edit).png" alt="play">

    <a href="#" ><p>Watch Demo <br>Video</p></a>
    <div >
        <iframe  width="560" height="315" src="https://www.youtube.com/embed/6dNho0h_yQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        <button >
            <img src="/images/close button.png">
        </button>
    </div>
<img  src="./images/Line ``4.png">
</div>