Stop and play Iframe video when lightbox closes


I'm making a lightbox that is supposed to show a youtube video. The first problem that I encountered, was that my youtube video would still play when I closed the lightbox.

I then added: <strong>$('iframe').remove();</strong>


But then the iframe goes away offcourse , and only a blank box opens when i click the link activating the lightbox.

How do I make my iframe load again, after removing it?

Or, is there another way of making the video stop when I close down the lightbox?

My code is here:

<html> <head> <title>Youtube Lightbox</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/css"> body { font-family: Arial; } .backdrop { position:absolute; top:0px; left:0px; width:100%; height:100%; background:#000; opacity: .0; filter:alpha(opacity=0); z-index:50; display:none; } .box { position:absolute; top:20%; left:30%; width:500px; height:300px; background:#ffffff; z-index:51; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444; display:none; } </style> <script type="text/javascript"> $(document).ready(function(){ $('.lightbox').click(function(){ $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); $('.box').animate({'opacity':'1.00'}, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.backdrop').click(function(){ close_box(); }); }); function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); $('iframe').remove(); }); } </script> </head> <body>

This is a webpage...

<a href="#" class="lightbox">Open Youtube lightbox</a> <div class="backdrop"></div> <div class="box"><iframe width="500" height="300" src="http://www.youtube.com/embed/some/video" frameborder="0" allowfullscreen></iframe></div> </body> </html>

I hope that one you can help me out! :) Thanks.

Btw. I have researched the forum and found similar topics, but not an answer I could use, yet.


You could change the src attribute of the iframe with jQuery to nothing, and then reload it (if it doesn't reload by itself) with this:<br />

function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); $('#box iframe').prop('src', '#'); document.getElementById(FrameID).contentDocument.location.reload(true); }); }

(I got this from <a href="https://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery" rel="nofollow">this link</a>)

The only disadvantage is that the video will reload again when you open the lightbox for the second time, and that you need to change the function that opens the lightbox for the first time.

<em>As a note, I reccomend you not to load the iframe until the lightbox is opened, meaning that the best you can do is to add the code with JavaScript when needed. It takes 0.000001 seconds more, don't-ya-worry. <a href="http://nico.kupfer.es/sport" rel="nofollow">I use it in my website</a> and provides a very fast loading (of the website, of course) and keeps the browser very light.</em>

But another way (and I really love this one) is to trigger a space keypress on the iframe, hence stopping the video, so when it's opened again, you find it paused on the same instant. Something like:

function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); var e = jQuery.Event("keyup"); e.which = 23; // The spacebar key code is 23 $('#box iframe').trigger(e); }); }


function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); $('iframe').remove(); var video = $('iframe').attr("src"); $('iframe').attr("src",""); $('iframe').attr("src",video); }); }


That function will stop your video, without delete video src

<pre class="snippet-code-js lang-js prettyprint-override">function unsetVideoLink(id){ var src = $(id).attr('src'); $(id).attr('src',''); $(id).attr('src',src); }


  • Making responsive iframe
  • Stretch DIV to Bottom & Remove Scrollbar
  • With a Bootstrap Modal, can you restrict the fading of the page to a parent div of the page, and not
  • bootstrap 3 disable background after modal popup [duplicate]
  • CSS Local Font not showing up
  • Toggle visibility of text box based on status of check box -jQuery
  • Fade Background but NOT Text
  • Extract text from “” HTML tag
  • Imagemagick set interline spacing?
  • Docker container for google cloudML on compute engine - authenticating for mounting bucket
  • How to use arithmetic operators with SAS macro variables [duplicate]
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • Netlink sockets and libnl - nl_recvmsgs_default returning -16 (EBUSY)
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • PHP get selected value of select form
  • Making header act like google chrome mobile app address bar
  • Google OAuth: can't get refresh token with authorization code
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Adjust width of select element according to selected option's width
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Blackberry - Custom EditField Cursor
  • Custom validator control occupying space even though display set to dynamic
  • Play WS (2.2.1): post/put large request
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Django rest serializer Breaks when data exists
  • Body moving without any force applied? (Box2d)
  • Xamarin Forms - UWP Fonts
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Modifying destination and filename of gulp-svg-sprite
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • How to Embed XSL into XML