How to add responsive Video using Oembed in WordPress


responsive video tricks

Add responsive video in WordPress post

Oembed help us to add any video in our post or pages without knowing how their original site is rendering or showinh the same video.  Few website loads their video in iframes, few of them use objects, some of them use embed tag to do that.  They do provide share code which you can easily use to add  theier videos

BUT, using their methods does not generate FULLY responsive  VIDEO and you can not generate a  feasible width and height that is suitable for all the devices. Here Oembed is the right choice for you, Which is available to you all the time in WordPress since 2.9. You are just required to explore the methods and this wonderful technique.

In order to add any Video from 30+ video sharing sites supported by Oembed, You have to only copy and paste the URL of that video only. for example we are going to add a video from vimeo on our website.

https://vimeo.com/50522981

When you will add the above code inside your post, Oembed will automatically bring the desired video on your website. But This video will not be responsive all the way.. Now its time to make this responsive.

Now open your functions.php file and add  the following code. Just copy paste.

function video_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'video_embed_html' ); // Jetpack

The code is going to add and new class video-container with every video added through oembed. Now its time to do some styling using our style.css file. So open your style.css files and add the following code

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Now same your work and enjoy -responsive video on your website.




Suggested Similar Articles

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>