How To Make Videos Responsive in Dynamik Website Builder

Some time back I started my YouTube Channel, and I wanted to embed those YouTube videos in my WordPress Posts.

At that time, I used to use Genesis theme and Dynamik Website Builder (DWB) child theme.

Though DWB is a great child theme of Genesis, it does not make videos responsive by default.

I thought it was going to be easy to make videos responsive in Dynamik Website Builder.

But I was wrong.

It was a real pain!

I literally went on a wild goose chase throughout the internet to find out how to make videos responsive in Dynamik Website Builder.

But finally after spending an entire day, I did find a simple solution and here’s how I found it…

How to Make Videos Responsive in Dynamik Website Builder – The Problem

You can easily make videos responsive by using one of many plugins available for embedding videos in WordPress. There are both, free and paid, plugins available.

I did not want to use a free plugin to make videos responsive because you never know when the plugin author will stop supporting it. Even though the WordPress community is large, many plugins don’t get frequently updated once the plugin author stops updating them.

I found many paid plugins too. But most of them either relied on shortcodes, or they had tons and tons of features.

I just wanted to make my videos responsive. I had no intention of using the additional features that the paid plugins provided like creating video galleries, adding a button to subscribe to my YouTube channel, viewing analytics, etc.

So it did not make sense in spending money on paid plugins.

I realized that I just needed some code snippet that I can plug into Dynamik Custom area to make my videos responsive. And I found that code snippet after spending an entire day sorting through Google’s search results.

How to Make Videos Responsive in Dynamik Website Builder – The Solution

I found this great article on WPBeginner that listed two different ways to make videos responsive.

One was using a free plugin. But it had not been updated for more than two years at the time of writing this article. Do you see why I don’t like to use lesser known free plugins?

The second method was using FitVids jQuery plugin.

That article on WPBeginner explains in detail how to make FitVids work in WordPress; it is not so simple, at least I did not think so.

After multiple searches on Google, I found the below code snippet from Alexander Agnarson.

Paste the below code in your Dynamik Custom Functions area.

/* Add responsive container to embeds
/* ———————————— */
function alx_embed_html( $html ) {
return ‘<div class=”video-container”>’ . $html . ‘</div>’;
}
add_filter( ’embed_oembed_html’, ‘alx_embed_html’, 10, 3 );
add_filter( ‘video_embed_html’, ‘alx_embed_html’ ); // Jetpack

NOTE: Add the last line only if you use Jetpack, else remove it.

TIP: If you are using a theme other than Dynamik Website Builder then paste this code into your child theme’s functions.php file.

And then paste the below CSS in Dynamik Custom CSS area.

.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%;
}

TIP: If you are using a theme other than Dynamik Website Builder then paste this code into your child theme’s style.css file.

HOT TIP: If you want to avoid writing code to make your videos responsive then get the Beaver Builder Theme. It will make your videos responsive by default. Read it here why I shifted from Genesis to Beaver Builder Theme.

Finally, to embed the YouTube video in your WordPress post or page, simply paste the YouTube URL of your video, like this “https://youtu.be/T6IUTp_THeM”.

The above code will make sure that the video you embed in your Post or Page becomes responsive and adjusts itself to various screen sizes.

Any Other Way?

I am sure there will be many other ways to make videos responsive in Dynamik Website Builder.

If you know of any other way, then I would love to hear it. Just let me know in the comments below.

And as always, if you did find this tutorial useful, then please share it with your friends. I would appreciate that.