embedded YouTube video layout issue - html

Question

On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!

Answer 1

I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.

Answer 2

Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.