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: