Video continues to play when the modal closes

Asked

Viewed 664 times

1

I created a modal that opens when clicking on an image, inside this modal will have a youtube video and a small description on the side, however whenever I close the modal the video continues to play. I wanted the video to pause when clicking close and (if possible) start playing alone when opening the modal. I have tried several Java codes but it seems that for some reason none works with my code.

My code is this::

 <script>

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '365,99',
      width: '650',
      videoId: 'd0D8tTtY4lU',

    });

$(".text").on("click", function() {
player.playVideo();
});
  }


</script>

</head>

<body>

<a href="#abrirmodal"><div class="container"><img class="image" 
src="https://cdn.flickeringmyth.com/wp-content/uploads/2017/05/Paddington-2-
posters-1-header.jpg" alt="Paddington 2 - Trailer" ><div class="middle">
<div class="text"><img src="play.png" alt="play" width="60" height="60">
</div>
</div></div></a>   

<div id="abrirmodal" class="modalDialog">
<div>
<table border="1">
<a href="#fechar" title="Fechar" class="fechar">x</a>

<tr>
<td ROWSPAN="2">  <div id="player"></div>
</div> </td>
<td><h2>Modal</h2></td></tr>
<tr><td>Esta é uma simples janela de modal.
Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou 
formulários.</td></tr>
</table>
</div>
</div>
</body>

I’ve tried using the Youtube iframe link instead of the API, but I couldn’t either. The function:

$(".text").on("click", function() {
player.playVideo();
});

It also doesn’t seem to work, either to start playback or to pause.

javascript api modal iframe youtube

2 answers

0


Your code has many problems. Since we can not analyze completely because it seems to me that it depends on some styles and codes not listed in the question, I will put a simple example based on the code posted.

Both the code player.playVideo(); how much player.stopVideo(); works normally. It’s probably not working because it’s not putting in the right place or calling in the right way (info about the API).

See an example of your code working on Jsfiddle (API does not work here on snippet):

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      height: '365,99',
      width: '650',
      videoId: 'd0D8tTtY4lU',
   });
}

$("a").on("click", function() {
   $("table").show();
   player.playVideo();
});

$(".fechar").on("click", function(e) {
   $("table").hide();
   player.stopVideo();
});

table{
   position: fixed;
   top: 10px;
   left: 0;
   background: white;
   display: none;
}

.fechar{
   padding: 10px;
   background: yellow;
}

<a href="#abrirmodal">
   <div class="container">
      <img class="image" src="https://cdn.flickeringmyth.com/wp-content/uploads/2017/05/Paddington-2-posters-1-header.jpg" alt="Paddington 2 - Trailer" >
   </div>
</a>   

<div id="abrirmodal" class="modalDialog"><div>
<table border="1">
   <tr>
      <td ROWSPAN="2">
         <div id="player"></div>
      </td>
      <td>
         <a href="#fechar" title="Fechar" class="fechar">x</a>
         <h2>Modal</h2>
      </td>
   </tr>
   <tr>
      <td>
         Esta é uma simples janela de modal.
         Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou formulários.
      </td>
   </tr>
</table>

  • I copied the code exactly as you sent it. However, it still doesn’t work. When you click on the image, the table doesn’t open. I don’t really understand why, since the code is working correctly on Jsfiddle. But every time I click on the image, the link changes (for example it goes from index.html to index.html#openmodal) but nothing happens. I’m going to leave a response here with the code exactly as it is at the moment.

  • @Dianataveira Vc loaded jQuery at the beginning of <head>?

  • @Another thing, the <script> must go after the elements, at the end of the <body>.

  • Yes, but I didn’t get any results so I tried to load also at the end of the body, but it still didn’t work. The jQuery I used was this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  • @Dianataveira I will change the Fiddle, there must be some conflict.

  • I got it, that’s right, just put the script at the end of the body! thank you very much

  • @Legal information. Obg!

  • I have now come across another problem. in java code the open function is defined by "a" and displays the "table". However I plan to make 4 different images to open 4 different tables with 4 different videos. However with this code all images open the same window. Is there any way to put class or id instead"?

  • @Dianataveira Yes. You can put an id for each video and pick it up by clicking.

Show 4 more comments

0

At the moment my code is like this: 

<head>

<title>Efeito Modal</title>
<style>
table{
position: fixed;
top: 10px;
left: 0;
background: white;
display: none;
}

.fechar{
padding: 10px;
background: yellow;
}

.image{
width: 320px;
height: 180px;
}
</style>

<script>
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  height: '165,99',
  width: '250',
  videoId: 'd0D8tTtY4lU',
});
}

$("a").on("click", function() {
$("table").show();
player.playVideo();
});

$(".fechar").on("click", function(e) {
$("table").hide();
player.stopVideo();
});
</script>
</head>

<body>
<a href="#abrirmodal">

  <img class="image" src="https://cdn.flickeringmyth.com/wp-
content/uploads/2017/05/Paddington-2-posters-1-header.jpg" alt="Paddington 2 
- Trailer" >

</a>   

<div id="abrirmodal" class="modalDialog"><div>
<table border="1">
   <tr>
    <td ROWSPAN="2">
     <div id="player"></div>
  </td>
  <td>
     <a href="#fechar" title="Fechar" class="fechar">x</a>
     <h2>Modal</h2>
  </td>
</tr>
<tr>
  <td>
     Esta é uma simples janela de modal.
     Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou 
formulários.
  </td>
  </tr>
  </table>

   </body>

Browser other questions tagged javascript api modal iframe youtube

You are not signed in. Login or sign up in order to post.