Add Embedded Videos to WordPress and Make Them Responsive
27 Aug 2019
Home » BLOG » WordPress » Add Embedded Videos to WordPress and Make Them Responsive

Add Embedded Videos to WordPress and Make Them Responsive

Last updated on   by    /   category:  Web development, WordPress
  Buy me a coffee!
2 min read

Recently, I got a request from my client to add the video to WordPress. Plus the video must be responsive. Today, I gonna share with you how to implement it.

IFRAME & HTML

For the iframe responsive, we need a <div> or any HTML tag that is a block style (display:block) wraps the iframe. Below, we add the <div> with video-container class which we will add the style later.

<div class="video-container">
  <iframe width="1425" height="559" src="https://player.vimeo.com/video/348728188?title=0&portrait=0&byline=0&autoplay=1"></iframe>
</div>

STYLESHEET (CSS)

Adding the style to our video-container. We set position as relative for the container and later on, we will set the position as absolute to the iframe. Also, we set the overflow as hidden to make sure nothing places outside the container. Finally, we set the padding-top at 56.25%. The ratio bases on this formula (height 9 / width 16). This is the default ratio for Youtube videos. You can change the ratio whatever you like. But I use this ratio since I embed the Youtube video as well as the video from Google drive. So I want to keep those videos as the same ratio.

.video-container {
     position: relative;
     overflow: hidden;
     padding-top: 56.25%;
}

Next, we will add the style to iframe.

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

In the iframe style, we just set the iframe to the top and left position and set the iframe as full size without a border. The responsive setting is already done by video-container.

A full sample of iframe responsive 

<style>
.video-container {
     position: relative;
     overflow: hidden;
     padding-top: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
<div class="video-container">
  <iframe width="1425" height="559" src="https://player.vimeo.com/video/348728188?title=0&portrait=0&byline=0&autoplay=1"></iframe>
</div>

And that’s it. Now you can embed the video into your WordPress or any website you want.

source:
blog.Theodo.com
Mixkit