SHARE

Steps to Create Responsive youtube video without wordpress plugin

To insert Youtube videos in wordpress most of all iframe tags are used . By default iframes sizes are not properly controlled by CSS . When you embed a youtube video in a wordpress post, <iframe> is used to embed. To make this video responsive follow these steps .

Create a Division around <Iframe> tag

Click on all post and choose post
Click on all post and choose post

Go to your wordpress dashboard. In the left pane and click on all posts.

Now choose the post for which you want to create a responsive YouTube video iframe.

Click on Edit post. Select the Text view of the post. Locate the <iframe> tag in the post text view. <iframe> tag is looks like the following code sample <iframe> </iframe>

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/M879cMiXl8w” frameborder=”0″ allowfullscreen></iframe>” 

Create a <div> around <iframe> tag of video iframe tag.

Example :

<div>

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/……..” ………..> </iframe>

</div>

Use CSS class attribute for make responsive youtube

To make a responsive youtube video you have to use class attribute .Because with use of class attribute you can control much batter you video iframe .

Code example:

<div class=”video”>

<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/……..” ………..> </iframe>

</div>

know set width of youtube video iframe is 100%  and height of video iframe is “auto“. Your code is looks like following as shown in following image in yellow highlight.

</div class=”video”>

<iframe width=”100%” height=”auto” src=”https://www.youtube.com/embed/M879cMiXl8w” frameborder=”0″ allowfullscreen>

</iframe>

</div>

 

Responsive youtube video without wordpress plugin
Responsive youtube video without wordpress plugin

know update post to save the changes.

Make some changes in stylesheet Style.css me

The next step is make some changes in your style sheet style.css . Go to the Appearance tab on the wordpress dashboard and click on Editor. Select the style.css from the right side files list. copy and paste the following text in the style.css after all media queries .

Suppose in your style.css 5 @ media queries are placed . Then copy the following and paste it in all of media queries @media  screen and  . For more details wathc the video help .

The code starts here

.video{position: relative;padding-bottom: 65.25%;padding-top: 30px;height: 0;overflow: auto; -webkit-overflow-scrolling:touch; //<<— THIS IS THE KEY border: solid black 1px;}
.video iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

code ends here. Know click on Update file to apply changes. know check this post video in any device it is compatible for all devices.For learn in detail see the video below.

Watch Video

Note: In WordPress 4.6 or above version you have no need to do more for insert video in your post . Just copy youtube video URL and paste it in the post . WordPress will automatically insert video in post .