Develop Reference

Stopping my embedded Youtube Videos on click

I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!

This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)

Find out when the Youtube HUD fades out, and fade out an element with it

I am creating a chrome extension that adds a button to the youtube player HUD (to the left of the watch later button). This works fine, but the only problem is that when the HUD autofades after a few seconds of inactivity, this button element doesn't.
I've added the button to the following div using javascript:
<div class="ytp-chrome-top-buttons"> </div>
and my button looks like this:
<button class="customClass" id="customID" title="custom title"><svg class="customClass"></svg></button>
I've looked through the source of the page to try and see how exactly youtube makes the other icons disappear, and whether I can copy a class to my svg to make it disappear, but I haven't been able to find it.
I've looked at using a timer and javascript to make the element disappear, but I figured if the functionality is already there, why complicate it.
As a last resort I will be resorting to using the timer method, but I'd much prefer using CSS classes.
I have had a cursory glance into the Youtube Player API, but to be frank, I'm having a hard time understanding how it works (While I have a few years of programming experience, I only started learning javascript, HTML, and CSS yesterday). I also understand that this API is only for embedded youtube videos?
To clarify, I DO know how to use API's in javascript, just not this particular one. I have used the youtube data API to implement the button's functionality successfully.
Any help is appreciated.
Thanks.

If you examine the element changes, you can see that the class list of the video has changed with the change of the bottom bar. When the bottom bar is hidden, the ytp-autohide class is added. Keeping this in mind, after scanning the class changes with the mutation observer, you will reach the desired result when the ytp-autohide class's existence status changes.
var video = document.querySelector("#movie_player");
var lastState = video.classList.contains('ytp-autohide');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.attributeName == "class"){
var currentState = mutation.target.classList.contains('ytp-autohide');
if(lastState !== currentState) {
lastState = currentState;
if(currentState)
console.log("Hided");
else
console.log("Shown");
}
}
});
});
observer.observe(video, {attributes: true});

JS / JQUERY iframe.contents() syntax

I'm currently working on a project which includes when the user hovers over a certain div then it will play the associated audio file and stop all other audio elements on the page that contain the class 'stoppable' in them.
I've got the code working but now I'm having that page as an iFrame on another page which can insert elements into the iframe, so I have to keep adding iframe.contents on elements to make them work.
On the code below it detects when the user has entered the div and plays the correct audio however it does not stop all the other audio elements.
I believe I have the incorrect syntax on the
$('.stoppable:not($("#new-audio-476333", iframe.contents()))
section, and I'm not sure what the correct syntax would be.
var iframe = $('#clientframe');
$('#476333',iframe.contents()).mouseenter(function() {
$('.stoppable:not($("#new-audio-476333", iframe.contents()))').each(function(){
this.pause(); this.currentTime = 0;
});
var audio = $('#new-audio-476333', iframe.contents())[0];audio.pause();audio.play(); });
Any help would be greatly appreciated.
Thanks!
-Hopeless

$('.stoppable:not(#new-audio-476333)', iframe.contents())
This means that elements with class name stoppable which its id is not new-audio-476333.

Simple pause with vimeo api Froogaloop

Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone

Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.

froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!

Pause all other players besides activated one. jQuery audio plugin for <audio> element

I've got this plugin which applies different style to html5 <audio> element and provides flash fallback to browsers that don't support .mp3 file format. Problem I encountered is that once you start playing one song, and then click play on any other song, all of them will play at the same time, which is bad user experience.
I was trying to figure out how to edit plugin to make it only play one song at a time, so say if user listens to one song and then click play on other, first one should pause, and so on.
I'm not entirely sure, but I think something need's to be edited along these lines:
playPause: function() {
if (this.playing) this.pause();
else this.play();
},
However, there are various places in the plugin which seem to deal with playing and pausing song, so I'm not sure that this is exact correct line for this. I'm still very new to jQuery, and can't entirely figure out how this big audio library works, I've been reading through code comment's , but still am unable to figure this out.
Full code of the plugin is available here: http://freshbeer.lv/mg/js/audio.min.js Official plugin website: http://kolber.github.io/audiojs/
You can visit my demo page to see the issue, just click play on several players and you will see that they all play at the same time: http://freshbeer.lv/mg/index.html

Use the addEventListener and the play event. This pauses all players except the one that the play button has been pressed on.
audiojs.events.ready(function () {
var as = audiojs.createAll();
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
});