When zooming, background video doesnt stick - css

http://www.littlemountainmedia.co.uk
Just trying to get a video behind the header but when zooming in or out, the content on the rest of the page overflows the video.
Just wondering how to fix this as otherwise it is perfect
CSS for the video : http://pastebin.com/VX0ki1GF
Thanks

Related

Body's background image covers part of header's background image in mobile version

This is my first attempt to make a webpage but something seems to go wrong with the mobile version of my page. On desktop everything is ok but on mobile, the right part of my header's background img is covered by the main background image.It is a little difficult to describe it so I 'm sending you the link for your better understanding http://rockittest.blogspot.gr/.
I tried to resize the images, to change position, I've read all relevant threads but I couldn't fix it. Do you have any ideas about what can be wrong?
Thank you in advance!

Background video appears half way in the page (HTML5 video element)

my website is a single page site, divided into two seperate pages (www.JazzAndRain.com). I'm trying a HTML5 video fill up the 1st half of the site, but somehow when it's loaded in Chrome and Safari, the video appears half way in the page. When you inspect element, the video will be pushed up. Does anyone know a solution to make the video load correctly?
Margins are being added inline - by some javascript I assume. Stop whatever is doing that...

CSS/Chrome: YouTube video embed causing unwanted 1px vertical space

The problem:
When I embed a Youtube video in my page Chrome displays a vertical 1px white space on the left side of my page.
The problem is limited to Chrome and pages with YouTube embeds.
Live example:
A page with the problem (YouTube embed): http://tinyurl.com/978349d
A page without the problem (No YouTube embed):
http://tinyurl.com/95qq379
What I've tried:
I've tried resizing the video embed to a smaller width but to no
avail.
I've tried dissecting the CSS via Chrome's element inspector but to
no avail.
My question:
Can anyone suggest why Chrome is adding this unwanted space whenever a page contains a YouTube embed?
The only fix I could find is to set the #main container to width 959px instead of 960px. May not be the right solution but it works

emedded flash video hides the fly out of like / send button

Maybe someone is familiar with this problem?
on the website http://www.folkshegeskoalle.nl/ i have added the like and send button.
but, the youtube video under these buttons stays all the time on top (only not in firefox. here the flyout of the buttons go over the video, as desired). is there any solution to this?
the video is embedded through iframe, the buttons through the javascript sdk and special html code.
thanks for any suggestions..
Flash can be tricky to deal with when it comes to z-index issues. By default, a swf will appear on top of any other content that occupies the same space. One way you can fix this is by adjusting the wmode of your flash video. Try adding ?wmode=opaque to the YouTube video's URL and it should play better with z-index.

youtube embed over stickytop nav - IE7

How could I get my top sticky nav to remain on top of my youtube embed on IE 7?! I have a long vertical scrolling site, which I've conditioned to work in IE7 - BUT, there is a youtube video in one scroll section, and when you scroll passed it, it goes over the top sticky menu?
Do I need to wrap a div around it, and assign a 9999 z-index to it?
For every site I've ever been on, the Youtube play always stays on top of the other elements. Assigning 9999 z-index won't solve the problem.
The only solution would be to make the Youtube Flash Player stay behind other elements - check the Youtube help on that to see if you can change any settings.

Resources