How To Embed Videos Without Embed Code

Published December 2, 2014 by CSS Newbies.

Before I go into the code, remember that if a video does not have the option to embed, there may be a good reason for that. You may require special rights to use the video.. but more than likely they don’t have the right ads in place to embed.

Anyways, let’s take the modern example of Ellen.com. Ellen has created her own video platform (EllenTV) to leverage her giant audience, but the videos have no embed code.

So we take this page: http://www.ellentv.com/videos/0-pqedxv7g/, and luckily for us, all of her videos are in the same place on the page.

CSS

.mydiv {
width: 780px; 
height: 415px; 
overflow: hidden;
}
iframe {
width: 780px;
height: 900px; 
margin-top: -365px; 
margin-left: 2px;
}

HTML

<div class="mydiv"><iframe src="http://www.ellentv.com/videos/0-pqedxv7g/"></iframe></div>

So basically, you are creating a div and then placing an iframe within it. By playing with the margins, you can orient the video to fit properly. To save you from auto-play, here is a link with the final output of the code:

Sandra Collier Performs ‘Bang Bang’ On ‘The Ellen Show’

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>