defroster Posted July 18, 2012 Share Posted July 18, 2012 Hello, I am using a hide/show system which is displaying youtube videos. I would like the youtube video to STOP whenever the div is closed. How do I do this? Thanks for help. Online demo: http://defroster.99k.org/layers.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Slide</title> <style> body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #slidingDiv, #slidingDiv_2, #slidingDiv_3{ height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; display:none; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="incl/showHide.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.show_hide').showHide({ speed: 500, // speed you want the toggle to happen easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI changeText: 1, // if you dont want the button text to change, set this to 0 showText: 'View',// the button text to show when a div is closed hideText: 'Close' // the button text to show when a div is open }); }); </script> <a href="#" class="show_hide" rel="#slidingDiv">View</a><br /> <div id="slidingDiv"> <iframe width="560" height="315" src="http://www.youtube.com/embed/w68qZ8JvBds" frameborder="0" allowfullscreen></iframe> </div> <a href="#" class="show_hide" rel="#slidingDiv_2">View</a><br /> <div id="slidingDiv_2"> <iframe width="560" height="315" src="http://www.youtube.com/embed/B9tNGEt6rmE" frameborder="0" allowfullscreen></iframe> </div> <a href="#" class="show_hide" rel="#slidingDiv_3">View</a><br /> <div id="slidingDiv_3"> <iframe width="420" height="315" src="http://www.youtube.com/embed/eW5yWUKDMpg" frameborder="0" allowfullscreen></iframe> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Mahngiel Posted July 18, 2012 Share Posted July 18, 2012 https://developers.google.com/youtube/js_api_reference Add some logic from the API reference to your script Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.