Hide You Tube, Vimeo videos with CSS and jQuery, IE bug

Hello, lastly I was working as a member of Stereotropism team on a new project which will be on air sometime within September. I can only give the name of it, “Brand Father”. I will do post the link once the site goes live (here you go it’s live now www.brandfather.gr).

So I was working on a media gallery which actually is on the article detailed page. The concept is to have as many videos (either you tube or vimeo iframes) plus a bunch of images under the same media gallery.

The problem arises when you want to just hide a div which has a either you tube or vimeo iframe in it and is in playing mode. The normal jQuery methods, fadeOut, hide or even css “display:none” work fine however in IE (not in version 9) you don’t have the right effect as video still plays even if it’s hidden or faded out. So trying to find a workaround I ended up with this idea. Why not to store the html code from any iframe into an array and then just use it when I need to. If you do take out the whole html/iframe code from the page the video will just stop playing 🙂 I hope you find the script useful (it’s only for the next gallery button but it will be easy to have the back button too). Please post any comments, queries you may have.

Leave a reply

Your email address will not be published. Required fields are marked *

Back to Top