Freelance Web Designer in Dubai & SEO Expert in Kerala
01 / 01

How to add Responsive
YouTube Video in WordPress & Other Websites

How to add Responsive <br data-lazy-src=

While embedding the YoutuBe video We are facing responsiveness issues in mobile view and some case in the desktop view also.

By using this simple method you can embed the responsive Youtube Video.

Usually, the code will look like this way while we are getting the shared code of Youtube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/1HVe_f5OK2g" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

It will work in WordPress also you can simply add two lines of CSS code and adding the iframe into a div

First, create the respective CSS Class

Declare the below CSS class and paste it into the code

.yotube-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.yotube-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

If you are using the WordPress you can go to Appearance > Theme Editor > Style.css Edit and add the above CSS code in the file

 

Second Step, Add the Youtube Video into a Div

<div class="youtube-video-container">
<iframe src="//www.youtube.com/embed/1HVe_f5OK2g" 
frameborder="0" allowfullscreen class="yotube-video"></iframe>
</div>

Example of WordPress Youtube Video Embedding

 

by anvar
Published : Jun , 29

Post a comment

Your email address will not be published. Required fields are marked *

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

WhatsApp Logo Chat