We Keep Coding

Stopping any vimeo video on the page with jquery

sorry about my inexperience. I was given a certain html code:
<div class="embedded-video" style="display: block;">
<span class="fa fa-times-circle video-closer">Close</span>
<p></p>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" src="https://player.vimeo.com/video/155722997?title=0&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
<div>
<iframe allowfullscreen class="roots-video" frameborder="0" height="360" id="spvideo" name="spvideo" src="https://player.vimeo.com/video/155722997?title=0&autopause=1&byline=0&portrait=0" style="display: block;" width="640"></iframe>
</div>
</div>
I need a "close" button that stops the videos, whichever one is playing at the moment, or all that are playing, since you will only be able to play one a time.
I used a solution copied from https://stackoverflow.com/a/12932722/3808307
adding
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
and
var iframe = $('.roots-video')[0];
var player = $f(iframe);
$('.video-closer').click(function() {
alert('stoped');
player.api('pause');
});
But it obviously only works for the first video. How do I get the close to work for all the elements of the array? I don't care about performance here, I just want the close to stop all the videos that are playing if I cannot identify which one is playing

I don't have idea how it works but just a guess according to your exists code
$('.video-closer').click(function() {
$('.roots-video').each(function(){
var ele = $f(this);
ele.api('pause');
});
});

Unable to Autoplay Youtube video hiding behind a custom thumnail

Well I am using a custom thumbnail for the youtube video so when it's clicked the actual video shows up but the user has to click again to play the video. I wish to play it automatically when the image is clicked. Here is the markup (fiddle)
<div id="kill" onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img align="left" alt="royal music for cattle by farmer Derek with a trombone goes viral via geniushowto.blogspot.com videos" class="rimp" src="http://bit.ly/1pITz0L" style="cursor: pointer;" title="click to play royal music by Farmer Derek" /></div>
<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject" class="video-container" id="thevideo" style="display: none;">
<iframe id="ytvid" allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/qs_-emj1qR4?rel=0&controls=1&showinfo=0&cc_load_policy=0&iv_load_policy=3&modestbranding=1&theme=light&autohide=0&autoplay=0" width="640"></iframe></div>
Here is the script I used to change autoplay from 0 to 1 on clicked.
<script>
$('#kill').click(function() {
$("iframe#ytvid").attr("src", $("iframe#ytvid").attr("src").replace("autoplay=0", "autoplay=1"));});
</script>
but it doesn't work!
I also tried it like this but this time without the dummy autoplay=0 in the Youtube url.(fiddle-2)
<script>
$('#kill').click(function() {
$("#ytvid iframe").attr('src', $("#ytvid iframe", parent).attr('src') + '?autoplay=1');});
</script>
but unfortunately this one also failed. Am I doing something wrong here ? a solution will be very helpful. Thanks in advance.

Looks like you were just missing the rel=0 param
var source = $("#ytvid").attr('src') + "?rel=0&autoplay=1";
FORKED FROM YOUR 2nd Example - http://jsfiddle.net/mvdL6q1j/

Use this
jsfiddle http://jsfiddle.net/harshdand/7s6p1a6d/5/
$('#kill').click(function() {
var src = $("#ytvid").attr('src');
$("#ytvid").attr('src',src+'autoplay=1');
});

How to make a play and pause button?

I am trying to make a play and pause button
HTML:
<img id="change" src="../play button.png" width="100" height="100" /><script src="../jquery.js"></script>
<div id ="video">
</div>
Jquery:
$('#change').click(function () {
$('#video').html('<iframe width="0" height="0" src="//www.youtube.com/embed/....?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});
$(function() {
$('#change').click(function(){
$("#change").attr('src',"../pause button.png");
});
});
At the moment when you click on the play button it changes to a pause button img. And open a youtube video that opens hidden so that you can just hear the audio. I am looking to then; when you click the second time remove the html for the youtube video (So that it stops playing [or if you are feeling helpful you can help me find a way to make the video pause]) and then put the play button img back?

DIV swap onclick

I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?

this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.

Make multiple html5-video start on click for iOS5

I'm currently working on a page for playing different videos when you click an element. While it works beautifully on the computer, of iOS devices it does not. The problem is that when the element, in this case a button, is clicked, it shows the video but does not start playing, as it should. The script is
$(document).ready(function(){
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
and the html is
<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
​</div>
It anyone could give me a function that could mak this happen, tht would be great

iOS does not support more than one video element in a page at one time. It doesn't even give you an error message - it will merely display the poster image (or first frame) and then fail to play, just as you describe.
Unfortunately, you can't do a true cross-fade, but you can come close. Start with only one video element attached to the DOM. When switching from one video to another, you can fade the current video out, and then when it's done, remove it and add the second video. Apple has provided some details and code samples on how to do this.
In theory, you should be able to grab a snapshot of the video frame in a canvas and swap that in for the video and fade the canvas out, but iOS doesn't support capturing video frames in a canvas either.
These and some other non-standard behaviors are described well in this article.