Youtube video inside iframe not hiding in Safari 5.1

Question

I have 3 tabs on my site. Inside the second (hidden) div is the YouTube video in the iframe. When I click on the second tab (containing the video), the video starts playing. When you click on one or the third tab (containing images), the content area still displays the video. In this case, it should show images for the corresponding tabs. Video not hiding in Safari 5.1

How can i achieve this?

CODE :: 3 tabs (html)

<div class="view-content clearthis"> <div id="photos"> <div class="nav"> <a class="hide-divs" id="prev" href="#">Prev</a><a id="next" href="#">Next</a></div> <div id="gallery"> <asp:PlaceHolder ID="phRoomPhotoGallary" runat="server"></asp:PlaceHolder> </div> </div> <div id="video"> <div id="pnlVideo" runat="server"> <iframe id="objVideo" width="667" height="344" src="<%=RoomVideoURL %>" frameborder="0" title="<%=RoomName %>" allowfullscreen></iframe> </div> </div> <div id="floor"> <asp:Image ID="imgFloorPlan" runat="server" Height="344" Width="667" /> </div> </div> 

3 tabs

 enter code here <ul class="clearthis"> <li id="tabPhoto" runat="server"><a id="linkPhotoTab" class="photostab" href="#photos" title="<%=RoomName %>">PHOTOS</a></li> <li id="tabVideo" runat="server"><a id="linkVideoTab" href="#video" title="<%=RoomName %>">VIDEO</a></li> <li id="tabFloor" runat="server" style="margin-right: 0px;"><a id="linkFloorTab" href="#floor" title="<%=RoomName %>">FLOOR PLAN</a></li> </ul> 

Answer 1

I saw pretty funny answers about trying to solve this problem in Safari. Instead, try adding:

"Window mode = opaque"

as the first GET variable in the url for youtube video.

(for example: src = "http://www.youtube.com/embed/pPBLF2Ffbaw? wmode = opaque & rel = 0")

Worked for me in a similar situation.