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
