I have a page with a YouTube video embedded in html. I want to stop the video when it's closed using the YouTube API. I have included SWFObject (and jquery), but I'm not able to control the video using any of the described methods.
document.getElementById()
swfobject.registerObject('id', 'version')
How can I control a youtube video using the js api without embedding it through swfobject i.e. by hooking up to the existing tag in the DOM?
Edit for clarification: The video is displayed in a lightbox that is opened by the user and closed by clicking outside it. I want the video to stop playing when the user closes this lightbox.
this might be a better way: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
embed as an iframe. you can still control it with javascript.
Related
I have an HTML game where the audio is user submitted and played from within an invisible iframe with web audio.
I would like to play the audio without making the iframe into a button and making the user click on yet another thing when they're already interacting with the main site. Is there a good way to handle this? Is it possible to use javascript to transfer clicks on the main site onto the iframe or do there need to be a load of tricks used?
You can access the elements in <iframe> by using this:
window.frames['yourIFrame'].document.getElementById('yourAudioElemId')
After doing so you should be able to start playing audio of that element by using the .play() method that is available to <audio> tag. This is all assuming that you are using <audio> and not const audio = new Audio(), because I think there is no chance of getting into <iframe>'s JavaScript.
Hope it helps.
I'm using the YouTube iFrame API to embed YouTube videos on my site. The videos are pulled from Reddit data obtained via their API, so the content dynamically changes. Some of these videos load as "Video Unavailable".
My goal is to detect when this happens, and remove the unavailable video. However, I haven't found a way to detect this state.
What I've tried so far:
Look in the iframe contents for items with a class of ytp-error. This does not work because all modern browsers prevent javascript from looking inside iframe contents.
Adding an onError event listener to the player. This does not work because a video being unavailable apparently does not constitute an error in eyes of the player.
I assume there is some call that I can use to detect this in the player, but I have not found such as call. How can this be detected?
Thankfully, it doesn't require another call to the YT API. In the YouTube iFrame's onReady handler, getPlayerState() will return -1 (unstarted) for "unavailable" videos, while all other videos return a status of 5 (video cued). I can now simply remove all videos from the DOM which have this -1 status.
In my client website, when we play youtube videos in modal windows, they keep playing as we close the window.
Site: https://apoloi9.com.br. Each of the html list elements, where the videos and names are organized (as shown in the picture bellow), have unique id, but I couldn't find a way to make it work.
Section specified in this screenshot
You just have to empty or reload the src of the video embed. Therefore it would be stopped. Assuming you use JQuery:
$("#yourModal").on("hide",function(){
var video=$('.yourEmbed').attr("src");
$('.yourEmbed').attr("src",video);
});
These actions can also be achieved using plain Javascript.
I've got a page with a bunch of youtube iframes embedded.
I'd like to stop all videos on the page from playing.
I have no control over the embed code, so I can't access the frames by id or class (although I can access them by referring to their parent div).
The iframes have not been embedded using the youtube API, so I can't use that either.
How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.