I am trying to embed a Youtube player in a current page on our company website - http://www.johnpearsesafaris.com/page-news-ls.html#

There are a few places I'd like to place embedded players, but for the moment I am just trying to embed on in the top image (of the falcon with wings spread) under the "How did they ever film this?" title.

Currently, there is a static image - with a link that opens a full page view of the Youtube player on a new page.

I am not a developer, but had some small experience of HTML with a previous business and so fancy making what I think should be a relatively simple change on my own.

I have tried to use the iframe code from the Youtube site unsuccessfully. While the player appears in the correct place and plays correctly, it ruins the formatting of the rest of the page. The images for other news posts below the one I am trying to change disappear, and a lot of the other formatting gets ruined.

What I did, was replace the HTML between lines 167-185, with the following:
<div class="row">
<div class="loop-posts eight columns">
<div id="div3" class="post-CLASS blog-post-item b30">
<div class="post-heading">
<h2 class="blog-title"><a
href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a> </h2>
<div class="blog-meta"> <span class="blog-date">FEB
2014 <span class="blog-author"><span>
By </span><a class="blog-author-tooltip" rel="tooltip"
data-original-title="View all posts by TheEditor" href="#">The
<div class="blog-thumb-wrapper">
<iframe src="//www.youtube.com/embed/XBEyCr5AoIs"
allowfullscreen="" frameborder="0" height="360"
<div class="blog-excerpt">
<p>How did they ever film this? </p>

I am hoping that it's something simple that I have done wrong and not the possible effect of the CSS rules and how they are impacting it.

Would really appreciate any help / guidance anyone could offer.