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
Related
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
The pic (thumbnail) inside the iframe for the youtube video used to go to the edges of the iframe. Now, without changing any code that would've affected that, the thumbnail stays in the center, miniaturized, and there is black space around it on all sides. This happens regardless of the iframe aspect ratio. The issue is happening in Chrome only and it looks fine in FF.
*Edit - this is happening everywhere, not just my site. It's a Youtube issue.
Something just happened with this tonight with the Youtube thumbnails not being expanded to 100% of the video size. I noticed with my embedded videos on Chrome, but you can see it with almost all embedded videos on Chrome or Chrome Canary. The thumbnails are at 100% in Firefox or IE 11. Must be a YouTube issue.
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...
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.
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.