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.