0

I followed a walkthrough on YouTube for a simple form popup Modal, then replaced the form code with iFrame YouTube embedding. The guy was using Atom.io so I used that, and everything works except the audio keeps playing.

I am very new and learning terms as I go. In the js code, the guide started lines with the word "document" but on StackOverflow people are using a $ sign then straight to the function(). This question has been answered multiple times however I don't know how to incorporate that code into what I have. I understand that the video playback is simply being paused.

For example, Stop video when modal is closed looks like exactly what I need except I can't think how to merge it with my file. I could just use their code straight-up but then there's var and elements that weren't explained in the video.

I have tried adding 

document.querySelector(".bg-modal").attr = "src","";

but that just broke it. I use w3schools to get help with code.

HTML

<!-- Modal Section -->
<div class="bg-modal">
    <div class="modal-content">
      <div class="close">+</div>
      <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
  </div>
</div>

CSS

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.modal-content {
    width: 860px;
    height: 472px;
    background-color: rgb(192, 255, 255);
    border-radius: 8px;
    text-align: left;
    padding: 0px;
    position: relative;
}

.close {
    position: absolute;
    top: -5px;
    right: 0px;
    font-size: 32px;
    transform: rotate(45deg);
    cursor: pointer;
}

Javascript

document.getElementById("button").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "flex";
});

document.querySelector(".close").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "none";
});

Would it be easier to just embed the video to a blank page and show that in the Modal? It'll be more work as the site grows but at least it's something for now :/. Or if the js just changed the target to nothing somehow.

Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
Jolanxbl
  • 11
  • 2
  • `document.querySelector(".bg-modal").attr = "src",""";` is bad syntax for two reasons. One, that comma is out of place and two, you have three quotes together, which is parsed as an unterminated string. Try `document.querySelector('.bg-modal').setAttribute('src', '')` – mccambridge Apr 22 '19 at 18:50
  • This one still plays. I commented out the close line so this would be the only command on clicking the X and video was not affected. – Jolanxbl Apr 23 '19 at 06:06

3 Answers3

0

I would reccommend doing something like this:

var video = document.createElement("video"); video.setAttribute("src", "nameOfFile.ogg");

Then you can do something like:

video.pause(); video.currentTime = 0;

From w3Schools:

var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
}

You can then call these functions from inside your closing/open modal functions

Charles L.
  • 1,844
  • 2
  • 34
  • 56
0

Have you tried to user innerHTML?

For example: 

<button type="button" name="button" id="button">Click</button>
<!-- Modal Section -->
<div class="bg-modal">
  <div class="modal-content">
       <div class="close">+</div>
         <div id="video">
           <iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>
         </div>
      </div>
</div>

<script type="text/javascript">
  document.getElementById("button").addEventListener("click", function() {
      document.querySelector(".bg-modal").style.display = "flex";
      document.getElementById("video").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe>';
  });

  document.querySelector(".close").addEventListener("click", function() {
      document.getElementById("video").innerHTML = '';
      document.querySelector(".bg-modal").style.display = "none";
  });
</script>
Adis
  • 1
  • 2
  • Ah! This is nearly what I was looking for! :D The first set of code deletes the close button and breaks the thumbnail to open the video. So I placed it under the second and it works! Except the second time the thumbnail is clicked, the close button is gone.. I think I know the cause and this is the direction I was looking for :). I'll report back once it's all good. – Jolanxbl Apr 23 '19 at 06:18
  • YES! Your code was erasing all of the containers and CSS couldn't keep up so I made a new div class called theVideo right around the video link, then only used innerHTML to mess with that container. Nothing else gets touched, the video link gets deleted essentially, then replaced. – Jolanxbl Apr 23 '19 at 06:35
  • No what? When I add it to the website, the + character for closing the window, and the video are shown on the page instead of inside the Modal >_ – Jolanxbl Apr 23 '19 at 07:02
  • Can you share your code? I assume this is inside a modal div right? – Adis Apr 23 '19 at 08:10
  • This is what I'm using now. ```lang-js document.getElementById("button").addEventListener("click", function() { document.querySelector(".bg-modal").style.display = "flex"; }); document.querySelector(".close").addEventListener("click", function() { document.querySelector(".bg-modal").style.display = "none"; document.querySelector(".theVideo").innerHTML = ""; document.querySelector(".theVideo").innerHTML = '';}); ``` – Jolanxbl Apr 25 '19 at 02:48
0

I took the innerHTML command from @Adis to erase the video and then used it again to put the link back so it could be clicked a second time. I created another class around the iframe link so that it was the only thing being cleared. Otherwise, the command was also clearing the button to close the window :P.

//Video 001
document.getElementById("button").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector(".close").addEventListener("click", function() {
  document.querySelector(".bg-modal").style.display = "none";
  document.querySelector(".theVideo").innerHTML  = "";
    document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/U5u9glfqDsc" frameborder="0" encrypted-media; picture-in-picture " allowfullscreen></iframe></div>';

});
Jolanxbl
  • 11
  • 2