How To Embed Videos Without Embed Code

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.

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

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’

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

Share and Enjoy !

0Shares
0 0