CODEWITHSUNDEEP
jqueryhtmlcssiframe
rivenagares
rivenagares

Reputation: 117

Why won't my iFrame widen like I need it to?

I have a scroll bar on my page and I've linked youtube and vimeo videos into it. The videos are showing and playing fine, but the dimensions of the iFrame are off and I don't know why its happening.

HTML:

<!-- section that contains all pics -->
<section id="wrapper" class="wrapper">

    <article class="post">
    <p><iframe width="853" height="480" src="http://www.youtube.com/embed/0a9meMkn4Go" frameborder="0" allowfullscreen></iframe></p>
    </article>

    <article class="post">
    <p><iframe src="http://player.vimeo.com/video/76815334?title=0&amp;byline=0&amp;portrait=0" width="853" height="480" frameborder="0" 

webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a     href="http://vimeo.com/76815334">Beautiful Filth Bears Strange Fruit</a> from <a 

href="http://vimeo.com/kahlone">Kahleem Poole-Tejada (KahL-One)</a> on <a     href="https://vimeo.com">Vimeo</a>.</p></p>
    </article>

    <article class="post">
    <p><iframe width="853" height="480"     src="http://www.youtube.com/embed/YEiK6ymugrw" frameborder="0" allowfullscreen></iframe></p>
    </article>

    <article class="post">
    <p><iframe width="853" height="480" src="http://www.youtube.com/embed/rx6k65W5ScE" frameborder="0" allowfullscreen></iframe></p>
    </article>

</section>
<!-- close section -->

The Corresponding CSS:

/* main content - scroller
------------------------------------------------------------------- */  

#wrapper {
   float:left;
   margin:110px 0 0 0;
   padding:0 0 0 250px;
   background:#fff;
   position:relative;
   z-index:2;
   border-bottom:solid 20px #fff;
}

#wrapper img {
   color:#fff;
   width:auto;
}

#wrapper iframe {
   color:#fff;
   width:auto;
}

.post {
   padding:0 10px 0 0;
   background:#fff;
   height:100%;
}

I am not sure why I am missing. When I use images in this same configuration they are perfectly sized as needed. Thoughts?

Upvotes: 0

Views: 255

Answers (1)

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

#wrapper iframe {
   color:#fff;
}

Your width:auto is breaking. Try viewing here:

http://jsfiddle.net/Mbz9z/1/

Upvotes: 1

Related Questions