Mobile Friendly Youtube Embedding

Youtube uses iframes to embed videos on other sites which doesn't work well for mobile devices because they have a fixed width and height. Below is an example that will work well on the desktop, but not the mobile:

Whilst you could use a solution whereby you add some extra CSS to your site and then wrap your iframe in another container, I found a somewhat simpler solution that I think works better.

There is a site that will take a given image url, and apply a play button over the center of it for you. If you are doing this for a youtube video, you can just the following url for your video:

https://i.ytimg.com/vi/[my video id here]/mqdefault.jpg

Then, all you have to do is place that image on your site and make it link to the youtube video. Mobile devices will then play the video in the youtube app, which are likely to handle the video much better than having the video embedded in your site.

An example result is below:

Further Improvements

One could probably take this a step further and implement a CSS/Javascript solution to place the play button over the raw video thumbnail. The play button could appear slightly different when you hover over the image, such as to look like its been pressed, or turn grey. This would be more automated solution and look more like to the way the embedded videos behave.

Author

Programster

Stuart is a software developer with a passion for Linux and open source projects.

comments powered by Disqus
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. More info.