Is it possible to have a YouTube video played on a web page in Safari on the iPhone, and have the 'done' button and 'video finished' event send the user back to the mobile web page they came from?
Currently, it seems like i'm only able to direct them to YouTube.app to view the video ... but they then remain in YouTube.app and are presented with the videos comments and other such information, and I do not wish to display this information.
If this is possible, please provide a link to a site with documentation/examples or an example in your response.
Thanks.
Use YouTube's new IFRAME-based embed code (I believe they give it to you by default now when you click their embed button...?) and on an iPhone, it will be rendered as an HTML5 video if possible.
When users tap the play icon on it, it will launch the standard video viewer, not the YouTube app. When they exit the video, they'll be back on your webpage.
The new embed code looks like this:
<iframe
title="YouTube video player"
width="480"
height="390"
src="http://www.youtube.com/embed/VIDEO-ID"
frameborder="0"
allowfullscreen>
</iframe>
This is more or less what they do in the new YouTube webapp, except that they don't need the IFRAME (they just do the HTML5 embed on their own page).
Related
Just a quick question on this and how I can get a youtube video to stop playing when exiting a modal.
We have this homepage slider > https://www.bababing.com/
You can see that when you click on a tile in the slider it opens and starts playing the video. However, when you exit it still plays the video.
Is there anyway we can stop his happening that anyone knows of?
We are using fancy box to open the lightbox area.
Upon the video opening I also want it to autoplay the videos
Any thoughts would be fantastic
Thanks,
Glen
You have youtube player code inside inline content, but the script literally moves your content into the modal and puts back after closing. Therefore, if user interacts with your content, it stays the same after closing the modal.
You have several options:
1) You could use Youtube API to stop/start videos after content is displayed/hidden;
2) Display cloned version of your content (e.g., something like $.fancybox.open( $('my-element').clone(true) ); ), but then you probably still would need to use Youtube API to start video;
3) Build your own content on click event - something like $.fancybox.open( 'there will be youtube iframe code with autoplay option and something more' ); - this way you will avoid messing with Youtube API
4) Use direct links to Youtube like https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1 - the script will then parse it and load inside iframe automatically
I have embedded youtube videos on my website like this:
<iframe src="https://www.youtube.com/embed/YOUTUBE_ID" frameborder="0" allowfullscreen></iframe>
And everywhere it wokrs fine, but on Safari on iOS it opens the HTML5 player with the video in full screen, and then the player automatically closes. No error in the console, related to this issue.
Tried on standalone page with the same video, embedded the very same way, and had no problems.
What could be the reason?
I removed the JS files and then it played well :D ... so, I brought them back and started to remove them one by one ... and found out that the reason for the issue is mbox.js.
For some reason it breaks the behavior of the HTML5 video player on Safari for iOS. So ... now I'm looking for a solution for this :)
(Tried to move the mbox.js code in an iframe that loads in the problematic page, but it had no effect. So ... I going on with searching the solution.)
I have a youtube video in my website. Here is the code :
<iframe width="100%" height="100%" src="//www.youtube.com/embed/<?php echo $youtube_key; ?>?autoplay=0&showinfo=0&controls=0&modestbrandin=1&rel=0" frameborder="0" allowfullscreen>
I want that user can only see the video. I mean user can play it or pause it. No other control even I DON'T WANT user can right click on the video player.
Now this code invisible all option but user can right click and can copy the url :(
How can I implement this type of youtube in my website where user can only see it only from my website. any suggestion ?
Sorry if this has been asked before... in a mobile browser (eg iOS Safari) when a Vimeo video is embedded into a HTML page, clicking play on the video pops it open in the native player in Safari - I want to be able to launch a video in this exact way, but from an image link rather than having to embed the video... So that clicking the image pops open the video in the native Safari player.
I've searched around but think I'm lacking the correct terminology to know exactly what to search for.
Is this possible?
Thanks in advance...
Why don't you want to embed the vimeo code?
One work around can be going to your vimeo video settings, then Basic and at the bottom of that page upload your own Thumbnail image... You will still have to embed the vimeo code though, but now you will have the image you want as the first image before you click on the video.
This can be a partial solution in the mean time. Also I think a Pro vimeo account might allow a direct link to a video.
I am creating a mobile web site and would like to show a small (88px by 50px) YouTube thumbnail that, when clicked, plays the video in fullscreen and returns them to the webpage. It should work in iOS and Android.
My first approach was to use <a href="http://youtube.com/watch?v=oHg5SJYRHA0>...</a>. However, on iOS, the user is redirected to the YouTube app, and they must manually navigate back to Safari.
Next, I tried embedding a small iframe player with
<iframe id="ytplayer" type="text/html" src="http://www.youtube.com/embed/T0WepLbWyq0?autoplay=1&controls=0&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen width=88 height=50></iframe>
This correctly pops up a fullscreen video with a "Done" button on iOS that brings the user back to the Safari page. However, the resulting thumbnail is dominated by a large, red "Play" button.
Is there a way to hide the red Play button on an embedded video?
Or is there another way to embed a small YouTube thumbnail on a web page that allows users to return to the page when viewing is finished?
Currently, I'm considering a) Trying to hide the ugly red Play button with an overlay that allows clicks to pass through, or b) Trying to get a direct link to the YouTube video file, since linking directly to a video file allows the user to return to the browser when finished.
However, these hacks seem complicated and brittle. Is there a better way?
Thanks!