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
Related
I have a Vimeo iframe embed on a mobile site, and am trying to figure out how to detect when the user presses the "Done" button in the native iOS Safari video player.
I know this is possible with the "webkitendfullscreen" event if you are embedding with a video tag directly (as described here):
$('video').bind('webkitendfullscreen', function()
{
console.log('on webkit close');
});
However, the video object is not accessible in the case of a foreign iframe embed.
I have not, so far, been able to find a good way to get this to happen, after quite a lot of keyboard-head-banging. I really hope Vimeo adds a way to do this in the future. The only thing I have found is in their new JS API, there is an event fired when the video has ended, and you can latch on to that and do something if they watch the video all the way to the end. You can also detect when the user pauses the video and do something after a "reasonable" time-frame, depending on what you are trying to do.
My hope was that I would be able to close the corresponding modal window whenever someone closes out of a video, but that was really not a possibility.
you can use the leavepictureinpicture event
myPlayer.on("leavepictureinpicture", () => console.log("leave pip triggered"));
https://github.com/vimeo/player.js/blob/master/README.md#leavepictureinpicture
I searched for quiet some time… Seems like that embedded youtube videos really need the "human click" to increase the views on the YT profile. Tried some things with the API given from YT… no luck so far.
Does the mediaelement.js do the magic?
here is the answer from the YT js doc:
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
You can't use your own play button or enable autoplay if you want the stats... Tried it, the best way is to use the "native" youtube player with minimal UI and let the users click the "native" play button ...
I searched for it a lot but don't have a reasonable answer.How to play video from stream link or youtube link on webview android.i used tag video or iframe but occur some bugs:
-when click full screen video 'll stop and can't play again.
-when click back button for finish fragment,that contain webview,video still playing
Please see the "HTML5 Video support" section at http://developer.android.com/reference/android/webkit/WebView.html for some methods that you must implement.
When the video continues playing after finishing the fragment, are you destroying the WebView?
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!
The organization I work for has created an interactive YouTube video in which you can navigate around to other YouTube videos by clicking links within the video - sort of like a choose your own adventure type deal.
Anyway, I was working on a web page that references this video and I'd like to embed the video directly on the page.
The interactive portions actually work while the video is embedded, but unlike how it works when playing on YouTube, the url doesn't actually change and the back button is therefore non-functional.
So if I choose a path and determine that's not where I want to go, the only way to get back would be to reload the entire page and start from the beginning.
I'm guessing my best choice here is to just go ahead and link this off to YouTube, but I wanted to make sure I wasn't missing an obvious easy way to embed this video on the page and keep the back button functionality that's possible when the video plays on YouTube.
Thanks for your time!