CODEWITHSUNDEEP
htmlcss
DomingoSL
DomingoSL

Reputation: 15494

How to avoid div overlapping when embiding a youtube video on a webpage?

using the two methods to embed videos from youtube, the iframe: 

<iframe width="400" height="300" src="http://www.youtube.com/embed/2D_AU8-2QWY?rel=0" frameborder="0" allowfullscreen></iframe>

and the old one: 

<object width="400" height="300"><param name="movie" value="http://www.youtube.com/v/RNclwz9B_GQ?version=3&amp;hl=it_IT&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RNclwz9B_GQ?version=3&amp;hl=it_IT&amp;rel=0" type="application/x-shockwave-flash" width="400" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Im always gettin an ugly overlapping effect on my divs, like this:

enter image description here

So the question is how to avoid that? Thanks!

Upvotes: 1

Views: 4394

Answers (2)

peirix
peirix

Reputation: 37751

To add on 1ftw1's answer; to allow setting z-index on flash content you need to include the wmode param

From Adobe's site:

wmode - Possible values: window, direct, opaque, transparent, gpu. Sets the Window Mode property of the Flash movie for transparency, layering, positioning, and rendering in the browser. If this attribute is omitted, the default value is "window". For more information, see Using Window Mode (wmode) values below.
window - The SWF content plays in its own rectangle ("window") on a web page. The browser will determinehow the SWF content is layered against other HTML elements. With this value, you cannot explicitly specify if SWF content will appear above or below other HTML elements on the page.
direct - Use direct to path rendering. This bypasses compositing in the screen buffer and renders the SWF content directly to the screen. This wmode value is recommended to provide the best performance for content playback and enables hardware accelerated presentation of SWF content that uses Stage Video or Stage 3D.
opaque - The SWF content is layered together with other HTML elements on the page. The SWF is opaque and will hide everything layered behind it on the page. This option will reduce playback perfomance compared to wmode=window or wmode=direct.
transparent - The SWF content is layered together with other HTML elements on the page. The SWF background color (Stage color) is transparent, and HTML elements beneath the SWF will be visible through any transparent areas of the SWF, with alpha blending. This option will reduce playback performance compared to wmode=window or wmode=direct.
gpu - Use additional hardware acceleration on some internet connected TVs and mobile devices. In contrast to other wmode values, pixel fidelity for display list graphics is not guaranteed. Otherwise, this value is similar to wmode=direct.

Upvotes: 1

1ftw1
1ftw1

Reputation: 666

Try z-index in css to order your div's this way you can pick what go's on top

https://developer.mozilla.org/en/CSS/z-index

Upvotes: 1

Related Questions