AngularJS: Embedding Youtube video in iframe not working on Android Chrome
I am developing a web application with AngularJS and I am using a directive to embed responsive Youtube videos called youtubeResponsive , which allows the video to be embedded in an iframe with the video id as an initial parameter.
Everything works fine on desktop browsers, in fact I also managed to embed the playlist and play it in a loop.
The problem I am facing is now on Chrome Android, on a Nexus 5 device (latest Lollipop update) the embedded video is not showing and I can see the download notification instead. Every time I update I see a reboot of the download process, but no video is displayed. If I click on the download notification to see the file, nothing happens.
Of course my goal is to display videos also on mobile devices with autoplay and active looping.
The output I can see by inspecting the page on a mobile device 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&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile, other than the same warning I can see on the desktop, which doesn't seem to be 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".
Has anyone faced the same issue on Android Chrome or other mobile devices and OS?
I haven't started testing AOSP or iOS yet, but already in Chrome the problem is quite important. Let me know if anyone has managed to fix this.
source to share
You are specifically requesting an old Flash Player widget and not allowing it to update to HTML5, which is now required to support any type of mobile phone. You have to switch to the YouTube Player API, which requires a few extra lines of code, but it will work just about anywhere and will give you a lot of data about events related to video playback, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use IFRAME with this technique, although consider this directive, which appears to support the current API:
source to share