Do you want to make your website responsive by embedding a Youtube video?
Well, that’s easy!
When you have a responsive website then it becomes necessary to keep all the elements on your website perfect. These elements can be anything such as text, photos, and even videos. If you have an amazing Youtube video, there is no reason why you shouldn’t embed this to your website. A responsive video can further attract traffic to your website, thus, making it even more responsive.
However, you cannot simply embed the video by making some changes in the properties of the video since it will show variations in different devices. For example, if a video is responsive in desktop then it is not necessary for it to be responsive in mobile devices. You have to make adjustments accordingly.
But you need not worry about it because we have come up with step by step procedure to make it responsive on all the devices. So, let’s begin:
1. Get The Embedded YouTube Video HTML Code
To get the embedded Youtube video HTML, go to YouTube and search for the video that you want to embed on your website. Then click on the share button and select the option “embed” from the list of options that you get. Then just right click on the code and select on the copy button. This will get the code copied on your clipboard and you can paste it anywhere after that.
2. Use The Code On The Website
Access the website as an admin and then place the code wherever necessary. If you want to embed it in a blog post then simply paste it in the HTML section of your post editor. The code will be the one that you copied in the first step from YouTube.
3. Modify The Code A Bit
In order to make the embedded YouTube video more responsive, you are required to make some changes in it. You need to include a class that we will be making in the next step. After this class is included, the code will become optimized for all the devices.
4. Making The CSS
This is the step in which you will make the CSS property that you included in the code in the previous step. You need to make these changes in the style sheet file only. You need to specify things such as padding, position, height, width, and overflow in the property so that it can become responsive.
And after these steps, your videos will become highly responsive to all the different types of devices. You can see the changes by changing the size of your browser or by accessing it through different devices if available.
Furthermore, you can also use this process to make videos from other platforms responsive such as from Vimeo.
But what if this method does not work for you? Then you need not worry about it since there is a method that is exclusively for making embedded YouTube video responsive in android phones.
Making Video Responsive On Android Phones
First of all, you are required to wrap the embedding code inside a
tag and then you need to specify the bottom padding as 50-60%. Then the next step is to specify the child elements such as the iframe and state the width and height as 100% and specify the position as absolute. What this will do is make the embedded elements to get expanded automatically. Guess what? That’s what we wanted!
Start Embedding Your YouTube Videos
A responsive website needs a responsive video to maintain its responsive behavior. Therefore, you need to make embed the Youtube video in the right way.
So that is how you can make an embed a Youtube video on your website for both desktop and mobile devices to make it engaging for your visitors. We hope that you found it to be very helpful and will apply it in the future for your website. That is all we have for today.
