/    Sign up×
Community /Pin to ProfileBookmark

Embedding a Youtube player ruins rest of page formatting

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

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
Editor</a></span></span></div>
</div>
<div class=”blog-thumb-wrapper”>
<iframe src=”//www.youtube.com/embed/XBEyCr5AoIs”
allowfullscreen=”” frameborder=”0″ height=”360″
width=”640″></iframe></div>
<div class=”blog-excerpt”>
<p>How did they ever film this? </p>
</div>

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.

to post a comment
HTML

0Be the first to comment 😎

×

Success!

Help @justinpearse spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...