HTML 5 video embed effecting css

[kvieira90]

So im trying to embed a mp4 video file onto the website im currently working on using HTML5 code. The embed works perfectly couldn't be happier. The problem Im having is the div that Im positioning at the bottom right of the screen which is supposed to be fixed during scroll is now moving up when you scroll. Removal of the <source src="> tag fixes this problem but obviously removes the video from the page. Not sure if Im the only one with this problem or if anyone else has an Idea on how to fix this but ideas would be greatly appreciated.

[zcorpan]

URL?

[kvieira90]

not live yet. When it goes life I'll let you know. Im not even sure why it's doing it because it works on all the other pages.

[JAB Creations]

MP4/MPEG/H/264 is not an open standard and regardless of the fact that the WHATWG refuses to take a stance to passively please corporations you should not use that format for (X)HTML5 video elements. OGG and WebM video formats are acceptable. The MPEG-LA parent troll group has not open sourced H.264 and therefore has retained the right to effectively bill your use for the codecs.

[kvieira90]

So are you saying that because it is not supported that could be the reason my div is going from fixed to floating? The video plays just fine it's just taking my div and making it move when I scroll.

[JAB Creations]

Your division element is displayed differently in two ways, what is the difference? If a video is not appearing because the browser does not support the codec then it's likely that if the video element is not given explicit dimensions in CSS (height and width) then the containing division element will simply collapse.

Keep in mind if you have a child element such as an image and it it floated I think (offhand) that in CSS the image will overflow the division element whereas if the image is not floating the division element will extend all around it.

[kvieira90]

The div is fixed positioned to the bottom right of the screen and when the video is placed on the page it loses it's fixed properties and scrolls with the page

[JAB Creations]

Child content should not effect the parent in most cases. You have tested Chrome, Firefox, IE, Opera and Safari? It sounds like the CSS position property is being changed subjective to the video loading. I can't say offhand though you should consider analyzing the styling of the elements using the web designer tools built in to browsers.