YouTube Video Issue - when I fill the wrapper it left aligns on mobile & tablets

Question

Example: http://www.hollywoodunderground.com
When I set the width of the video to 1000px, it looks fine in browsers, but when you look at it on a mobile device it left aligns the whole page. My only fix so far has been to change it to 990px but obviously that doesn't look quite as good. I have the iframe inside a video DIV with the dimensions set in HTML, would CSS dimensions be better or is this something with YouTube?

Answer 1

In the following example, I have embedded a YT video inside a FluidGrid Layout (% width).  The video and layout respond to device width.
http://alt-web.com/FluidGrid/Fluid.html
The relevant CSS code for video-container is this:
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
The HTML:
<div class="video-container">
<!--YOUTUBE CODE-->
<iframe width="560" height="315" src="http://www.youtube.com/embed/your-code-here" frameborder="0" allowfullscreen></iframe>
<!--end video-container--></div>
Nancy O.