I'm using ionic framework and got the error of "This video contains content from Vevo. It is restricted from playback on certain sites. Watch yon YouTube".
To reproduce my problem technically, try to post below code into your hybrid app and see the result in the android phone.
<iframe width="560" height="315" src="http://www.youtube.com/embed/09R8_2nJtjg" frameborder="0" allowfullscreen></iframe>
If you doesn't white-list the domain that you access outside the application will be blocked for security reason . In the case of Intel xdk please add the domain name in white-list as https:///
Click to view the screen shot
Related
I have this code and I embed a Youtube playlist to my website
<iframe width="300" height="165"
src="PLAYLIST_URL?autoplay=1&showinfo=0&loop=1&list=PLAYLIST_ID&rel=0"
frameborder="0" allowfullscreen></iframe>
This works in desktop and it auto play and loop. But I can only listen one track in mobile and does not auto play (iPhone 4S, iOS 7).
This is my webpage : www.hqtunes.com
How can I fix the embed code and can auto play and loop, like on desktop?
Based this thread, autoplay cannot be done on iOS and Android devices. For various reasons (including, but not limited to data usage), Apple doesn't allow auto-playing of videos. You may also check this documentation which stated that "Warning: To prevent unwanted downloads on mobile networks at the user's expense, playback of embedded media can not be launched automatically in Safari for iOS, and only the user can start playback."
I was browsing ionic themes and I found a plugin on their pages which showcase their mobile application based on Ionic.
Script
I was wondering where does this script come from and if there is a possibility to do the same on a website to showcase the demo ?
Actually, you don't need any special script to do this.
Just put www folder to your web server and put <iframe> on your website like this to showcase your app demo:
<iframe src="http://www.example.com/myapp/" width="320" height="568"></iframe>
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&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 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.
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
I have developed a site using cakephp 2.x.
I want to show cakephp site in another site using iframe.
When I use Iframe code in normal site, Iframe displaying blank content with provided styles.
Below is the Iframe code
<iframe
src='http://mycakephpsite.com/'
width='600' height='800'
frameborder='1'
scrolling='yes'
align='bottom'
style='border:1px #68293c dotted;'>
</iframe>
Please let me know where I am doing mistake.
Thanks in advance.
This iframe works for me:
<iframe
sandbox="allow-scripts allow-forms allow-same-origin"
src="http://www.mycakephpsite.com/">
</iframe>
I think you may have an issue with your web server headers, check your X-Frame-Options option
https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
I have a single page mobile web app running through PhoneGap - so it's running HTML5, CSS3, JQuery. The app provides users the ability to view a different video on each virtual page. The videos are seen through an iframe which adds quite a burden to the application, most of all because I'm having difficulty cleaning up the iframes and their associated docs, dom nodes, and listeners.
I'm looking for advice on how to better clean up the content associated with the YouTube iframe after the user is finished watching the video. This is especially important as I will be submitting the app to the the App store and I understand that poor memory and DOM management can be a killer.
YouTube is embedded with the following code:
<iframe id="youtube_iframe" width="300" height="200" src="//www.youtube.com/embed/clip_id?autoplay=0&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
And the Memory Timeline from Chrome's Dev Tools looks like this: