Video continues to play when the mode closes

Navigation
1

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

My code is as follows: 

 <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 have not been able to either. The function: 

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

It also does not seem to work, either to start playback or to pause.

    
asked by anonymous 03.01.2018 / 02:44

2 answers

0

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

Both the code player.playVideo(); and player.stopVideo(); function normally. It's probably not working because you're not putting it in the right place or calling it right ( info about the API ).

See an example of your working code in JSFiddle (the API does not work here in the 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>
    
03.01.2018 / 04:06
0

At the moment my code looks 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>
    
03.01.2018 / 06:53
Even include with button on different viewpager screens How to assign a database value to a new object in C #?