Recently I help my client to add some videos in WordPress. If you host the video on Youtube or Vimeo, you should not have any issue for adding the videos on your pages or posts. However, if you host your video on Facebook(Facebook video) or Google drive, you may read this post.
Get the embed link
Let’s say, I have a video MP4 that host on Google drive and I want to add the video into my page. Below is my steps.
- At the video file or video post, look for the embed link.
- Copy the embed link. The embed code will look like this.
<iframe src="https://drive.google.com/file/d/1ujVoUyWFmq3GNxPKnNEZZ2Z5F9kEl_S3/preview" width="640" height="480"></iframe>Video display on all devices
The embed link will be iframe which is one of HTML tag. Now, we have a embed link for our video that we can add on our page. However, this code won’t display well on tablet and device since the width and height attributes are set as the static value. To make the iframe to be responsive, we will add some extra style for our iframe.
Below is the full code you can use. You must change the iframe code to be yours.
<style>
.iframe-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="iframe-container">
<iframe src="https://drive.google.com/file/d/1ujVoUyWFmq3GNxPKnNEZZ2Z5F9kEl_S3/preview" width="640" height="480"></iframe>
</div>At the content editor, you will find the HTML widget or custom html widget or any kind of HTML editor from your page builder and add the code above. Now, save the change and test the embedded video on desktop, tablet and mobile. The video should render well on all devices without any issues.
Example
For example, I use the custom html widget from Gutenberg and add the code above into this widget. The result is below.
That’s it for today.
