Array

How To Make Youtube Embeded Videos Responsive

So you have hit the issue where you have a responsive website and everything looks great, but then you notice that embeded videos do not correctly fit within your responsive design. Fear not this can be quickly fixed by adding a div around all of your embeded videos and a little bit of css to go along with it. If you are using something like TinyMCE to do this, then it might seem like a lot of work to have to manually add a div to all of the embed videos that you add. Well fear not it’s possible to do this automatically!

Start by going to the plugins folder of your TinyMCE install directory. I am using TinyMCE 4 so the plugin file contents may differ if you are using an older version. Either way the concept will remain the same. Search through the file and look for he following string. “Paste your embed code below”. This may differ for each version, the best way to test is to use TinyMCE and see what message pops up when you are adding the embed code. Using minified code makes this quite hard to find, but it’s possible.

You will see an onclick method just past this. This is the function that you need to modify. Inside of this function you will see the following code

a.insertContent(g(this.toJSON()))

Replace this line of code with the following.

a.insertContent("<div class='videoiframe'>"+g(this.toJSON())+"</div>")

If you save the file and test this you will see that the iframe is now being added with the div wrapped around of it. (you might need to have the tools that allow you to view the source code to check this). From now on any embeded iframe from youtube or any other video website, will have a div wrapped around it. This allows you to add some custom css that will make the video responsive.

Open up your css file and add the following code.

.videoiframe {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoiframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Save this and check your website again, any videos that have the “videoiframe” div wrapped around it will be responsive. This of course wont effect existing videos that were added before you made this change to TinyMCE, but at least now you can go back and edit the posts to add the div to all of the embeded videos and they will now be responsive without having to do any work modifying the source code.

Related Articles

Related Questions

WordPress Table of Contents Plus Not Working

I have been using this plugin for a while and i really like it. It seems to have completely stopped working recently. I can...

Function Keys Reversing Between Fn Actions And Normal

My keyboard has the usual F1 to F12 keys along the top. I use these for shortcuts in various applications. These keys also have...

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Markdown To Html Converter

Welcome to our web-based tool designed to make your life easier by converting Markdown to HTML in a matter of seconds. Our user-friendly interface...

AI Content Detector

We've got this awesome free tool that'll help you figure out if that content you're looking at was written by a human or some...

Image Saturation

Are you looking for an easy-to-use, free app to modify your image saturation levels and make your pictures truly pop? Look no further! Our...

Pixelate Image Tool

Introducing the ultimate free online image pixelator tool that allows you to easily transform your images into stunning pixel art in just a few...

Image RGB Level Adjustment Tool

Introducing the ultimate image color adjustment tool for all your photo editing needs. Our free online tool lets you take full control of your...

Image Color Inverter

Looking for a quick and efficient way to convert your images into negatives? Our Free Image to Negative Converter is the answer! Our online...

Latest Posts

Latest Questions