Stop Youtube Video Within Iframe On External Button Click

I know there are similar questions to this, but I haven't quite been able to get it to work. This code shows a YouTube video which is within an iframe. When a button (emsbinstartb

Solution 1:

You need to reset the link of the video, i had a similar problem this is how i solved it, i used jQuery in the process.

//First get the  iframe URLvar url = $('#YourIFrameID').attr('src');

//Then assign the src to null, this then stops the video been playing
$('#YourIFrameID').attr('src', '');

// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$('#YourIFrameID').attr('src', url);

Check this answer

Solution 2:

//in HTML

<!--the button --><aclass="button"data-open="videoModal"href="#">Example Video Modal</a><!--Modal Video --><divclass="row"id="theVideo"><divid="videoModal"class="reveal"data-revealdata-close-on-click="true"><h2>This modal has video</h2><divclass="flex-video"><iframeid="youtubePlayer"width="854"height="480"src="https://www.youtube.com/embed/4z6aSO05YHg"frameborder="0"allowfullscreenallowscriptaccess="always"></iframe></div><buttonclass="close-button"data-closearia-label="Close reveal"type="button"onClick="destroyVideo()"><spanaria-hidden="true">&times;</span></button></div></div>

//in apps.js

functiondestroyVideo(){
    var url = $('#youtubePlayer').attr('src');
    $('#youtubePlayer').attr('src', '');
    $('#youtubePlayer').attr('src', url);
}

//This work for Foundation 6.2

Solution 3:

Well, you just need to change the source(src)attribute value of iframe tag. It's that simple! :)

With javascript, you can do it as follows:

var stopButton = document.getElementById('video-close-button-id');

stopButton.onclick = function() {
  var myPlayer = document.getElementById("youtube-player-id"); 
  myPlayer.setAttribute("src", " ");
}; 

Happy coding.