Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.
Jetpack Edit CSS
I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.
If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.
Stage 2: use embed code and div class to create responsive youtube videos
Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.
Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.
Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.
If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.