Embed Youtube video and adapt code for mobile devices | Handmade in Europe Manuals

Embed YouTube video, and how to adjust video for mobiles

Our YouTube playlist with wordpress video manuals is slowly getting filled up nicely, but when you insert videos into your website you may have noticed that on mobile devices the videos shrink in width, but not in height. Luckily the latest CSS developments can take care of this 🙂

Embedding a YouTube video into your posts or pages in WordPress is (nearly) as easy as adding images. To ensure your YouTube video adapts the size to a mobile screen takes a few more steps, and some coding.

To embed a Youtube video you can watch the video below, to adjust the code for a responsive design please read the text under the video.

Adjusting the embed code with CSS for responsive designs

In most responsive websites the video will adjust itself in width, but not in height, which will look a bit funny on mobile devices.
You can fix this with some CSS code and wrap the video embed code into <div> tags.

You can just copy/paste the CSS code below into a custom CSS style sheet (I have installed My Custom CSS for this), and wrap the embed in the video-container class like this:
<div class=”video-container”>VIDEO EMBED CODE</div>

CSS Code to copy (without the ++++++++ signs):
++++++++++++++++++++++++++++
/*Youtube video container */
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
****************************

Famous last words

-A whole bunch of other additional codes (like how to always play videos in HD by default) can be found ON ZINX HERE.

-You can load a video to your Media Library too, and insert this into your page, but this will very quickly make you use up your web-space, and significantly slow down your website page loading. I recommend linking from a platform like YouTube.

-As with images, always make sure you have the rights to use the content. It is not that because everything can be found on the internet that you can use it on your website. If you did not make the video yourself please obtain the approval first from the creator, and give him/her the appropriate credits.


You can subscribe to our youtube video manuals channel HERE
And you can follow our blog (and of the other Handmade In Europe bloggers) ON BLOGLOVIN

11 thoughts on “Embed YouTube video, and how to adjust video for mobiles

  1. Reyes

    Love your posts Heyme, although I have no plans to make videos in the near future, I am bookmarking this just in case 🙂 Thank you for sharing!

Comments are closed.