YouTube iframe Embed Blank On Mobile

Question

I'm doing a simple iframe embed with YouTube videos on a website which is going to be viewed on mobile and desktop. The code I'm using to embed videos is this:

<iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe>

I was under the impression that a HTML5 player would be served if Flash wasn't available, however when I debug this on a mobile the video is being served in Flash and not working.

Am I using the wrong URL or are there extra things which need to be done to embed the video properly? I've noticed that you can do an iframe embed using JavaScript too.

Answer 1

Here is the actual problem that occurred in your case.

When you embed a youtube video with the following code <iframe src="https://www.youtube.com/v/VIDEO_ID"></iframe> a flash player is actually loaded. In this case your mobile doesn't support flash.

To rectify this issue you can use an HTML5 player which has the following structure <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

You can use this youtube code generator for generating customized player embed code.

Answer 2

Somehow I ended up using the wrong URL, for iframe embedding you must use: http://www.youtube.com/embed/VIDEO_ID

https://developers.google.com/youtube/iframe_api_reference