How to display inline content items / embed videos from other sources dailymotion / videogamer / wistia etc

How to embed videos from Dailymotion, Videogamer.com, wistia.com or other video sites

First, note that you can embed any video from a portal that provides a iframe embed. You just need to set the width and height to 100% in the embed code you copy from their site. We’ll provide examples for these 3 video portals. The bolded part is the id of the video, so if you copy the embed code from here, you should check that according to your video.

videogamer.com

<iframe width=”100%” height=”100%” src=”http://www.videogamer.com/videos/16197” frameborder=”0″ allowfullscreen></iframe>

 

wistia.com

<iframe src=”//fast.wistia.net/embed/iframe/201x4ehkev” allowtransparency=”true” frameborder=”0″ scrolling=”no” class=”wistia_embed” name=”wistia_embed” allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=”100%” height=”100%”></iframe>

videogamer.com

<iframe frameborder=”0″ width=”100%” height=”100%” src=”http://www.dailymotion.com/embed/video/x1c5v91” allowfullscreen></iframe>
Why does my iframe not display correct dimensions / sizes ?

 

Well, you need to be careful for width and height to be 100%

If you have this code for example

<iframe src=”//players.brightcove.net/5270290581001/default_default/index.html?videoId=5287782724001
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
width=”500
height=”281.25“></iframe>

 

Correct it to

<iframe src=”//players.brightcove.net/5270290581001/default_default/index.html?videoId=5287782724001
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
width=”100%
height=”100%” style=”width: 100%; height: 100%; position:absolute; top:0; left:0;></iframe>

 

 

PS: You have example gallery attached for import

Article Attachments

Was this article helpful?

Related Articles

Leave A Comment?