Reputation: 2423
I have embedded videos from Vimeo onto my site but it doesn't seem to fit the website frame even though I have specified the correct height and width
http://www.dawaf.co.uk/wildlion/
A black border appears on the left and right side of video
<div class="panel-10" id="hero_carousel">
<ul class="hero-carousel">
<li>
<iframe src="http://player.vimeo.com/video/17157212?title=0&byline=0&portrait=0&color=c9ff23" width="672" height="312" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<div class="carousel-copy">
<p class="carousel-title">
2012 Showreel
</p>
<p class="carousel-subtitle">
Cutting Edge Media
</p>
<p>Here is some of our recent work to give you a taste of what we have to offer. Some naughty media production companies use stock footage in their showreel, but we promise that all of the media seen in ours is in fact ours.</p>
<p class="readmore"><a href="http://www.dawaf.co.uk/wildlion/portfolio">View Portfolio<span></a></p>
</div>
</li>
</ul>
</div>
Upvotes: 0
Views: 849
Reputation: 165
Well my guess is that this has something to do with your height/width ratio. If you look at the default embed link for the video the width:height is 500:281 , which differs by a factor of about 1.78. Your width:height ratio is 2.15.
Notice that on your website, the video bar (the one with the play button and fullscreen button) runs as wide as it should, but the video does not. That seems to further suggest that the issue is with your width:height.
Perhaps try to make your width 1.78 times your height and see what happens?
Edit: This would likely mean that you had to make that whole 2012 showreel area a little bit taller. Hopefully that isn't an issue?
Upvotes: 1