AngularJS: Embedding Youtube videos in iframe does

Question

I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.

It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.

The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.

Of course my aim is to display the video also on mobile with autoplay and loop active.

The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)

<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;wmode=opaque"></iframe>

I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.

 Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash: 
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".

Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?

I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.

Answer 1

You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.

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

You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:

https://github.com/brandly/angular-youtube-embed