In this time of smartphones, more than 85% of people who use the internet prefer to browse the internet using their smartphones. In this time when a considerably large number of users are using the mobile browsers, it has become very important to create a responsive website.
Even the top search engines like Google and Bing are now giving priority to mobile-friendly websites in their search results. If you have not done already, this would be a great time to use the Google mobile friendly test and check whether your website is responsive or not.
One issue the web designer face while designing elements for a responsive website design is how to create a responsive video.
There are many free and premium plugins available on the internet which can do this work for you. What these plugins actually do is put an unnecessary overhead for the website load time and consume more resources.
You can see the LIVE DEMO of this script in working.
I am sharing with you this simple and evergreen method to make any video responsive which is embedded using iFrame just using simple CSS hack.
You can use this trick to make YouTube videos, Vimeo videos or any other videos responsive.
STEP 1: Wrap the video iFrame within a
STEP 2: Now assign the following CSS properties to the class which we used for the wrapper
I am positive that this guide was helpful to you. What other challenges do you face when designing a responsive website? Being a professional web designer with expertise in responsive web designs, I will be happy to provide a solution to your problems.
Even the top search engines like Google and Bing are now giving priority to mobile-friendly websites in their search results. If you have not done already, this would be a great time to use the Google mobile friendly test and check whether your website is responsive or not.
One issue the web designer face while designing elements for a responsive website design is how to create a responsive video.
You can see the LIVE DEMO of this script in working.
Responsive YouTube and Vimeo Videos to embed in websites
I am sharing with you this simple and evergreen method to make any video responsive which is embedded using iFrame just using simple CSS hack.
You can use this trick to make YouTube videos, Vimeo videos or any other videos responsive.
STEP 1: Wrap the video iFrame within a
<div> element and assign a class to it. We are using the class 'responsive-video' in our example.<div class="responsive-video">
<iframe src="https://www.youtube.com/embed/DRmst4lmoXw" height="315" width="560" allowfullscreen="" frameborder="0" ></iframe>
</div>
STEP 2: Now assign the following CSS properties to the class which we used for the wrapper
<div> element..responsive-video{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-video iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
I am positive that this guide was helpful to you. What other challenges do you face when designing a responsive website? Being a professional web designer with expertise in responsive web designs, I will be happy to provide a solution to your problems.