We Keep Coding

Pause all instances of mb.YTPlayer element on single button click

Using a jquery plugin for Youtube backgrounds (https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
I am trying to pause all the background videos with a single pause button, not sure for which reason it only pauses the first video, no matter the length of divs with background video.
I set up a jsfiddle explaining what I am trying to achieve.
The codes are as follow:
$('.vid').each(function() {
var vid = $(this).data('video');
$(this).YTPlayer({
videoURL: vid,
stopMovieOnBlur: false,
mute: true,
ratio: 'auto',
quality: 'default',
loop: true,
showYTLogo: false,
showControls: false,
containment: 'self'
});
});
$('.pauseit').on('click', function() {
$('.vid').YTPPause()
});
Thanks for any help on this.

Converting comment to answer.
Make sure the button is a button: type="button"
use .each again to pause the videos:
Like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() { $(this).YTPPause(); });
});
https://jsfiddle.net/mplungjan/swnj2bcg/

Take a look here. I modified the jsfiddle:
update
Chnage it like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() {
$( this ).YTPPause();
})
});

Using cookies to not show a popup based on particular actions

I"m currently using a fancybox to deliver content in a popup 2 seconds after a page loads. I'd like implement something that would remove the annoyance of this popping up every single time a page on the site is loaded.
Ideally, if a visitor clicked the "close" button on the fancybox, the pop-up wouldn't appear for them until the next day. If the visitor clicked the link that's in the popup, then the popup wouldn't appear until a specified later date.
Here's the code I'm currently using for the popup:
// fancybox arguments
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
'autoDimensions': false,
'autoSize': false,
'width': '650',
'height': 'auto'
});
// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
I assume this can be done using js cookie, but i'm not sure how the syntax would work based off what I'm trying to do with two different expirations .
EDIT:
Here's the HTML that is used for the pop-up:
<div style="display:none">
<a class="fancybox" href="#donation-info" alt=""/></a>
<div id="donation-info">
<?php if (get_field('donation_box_text', 'option')){
echo '<h2>To all our readers:</h2>';
echo '<p>' . get_field('donation_box_text', 'option') . '</p>';
echo '<div style="text-align:center"><a href="' . get_field('donation_link', 'option') . '" id="donate" class="donate-link" />Donate</a></div>';
}; ?>
</div>
</div>
I also tried updating the above function to include cookies, from the best of my guesstimation, to no avail:
$(document).ready(function() {
if ($.cookie('noShowDonation')) $('.fancybox').hide();
else {
$("#donate").click(function() {
// fancybox arguments
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
'autoDimensions': false,
'autoSize': false,
'width': '650',
'height': 'auto'
});
// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)
$.cookie('noShowDonation', true);
});
}
});
EDIT #2 -- Updated code
Using the code suggested by #Rob below, I tried adding the configurations to the fancybox as well as the timeout, however, no luck. Here's the JS Fiddle: https://jsfiddle.net/30Lxfc6r/

I've updated my answer with a JSBin example based on the FancyBox docs.
https://jsbin.com/bajocosese/edit?html,console,output
http://fancyapps.com/fancybox/#docs
$(function () {
// Define cookie name
var cookieName = 'hide_donate';
// Configure fancyBox
$('.fancybox').fancybox({
autoDimensions: false,
autoSize: false,
height: 'auto',
padding: 0,
width: 650,
beforeLoad: function() {
// Returning false will stop fancybox from opening
return ! $.cookie(cookieName);
},
afterClose: function() {
// Set cookie to hide fancybox for 1 day
$.cookie(cookieName, true, { expires: 1 });
}
});
// Handle donate click event
$('a#donate').on('click', function (event) {
event.preventDefault();
// Hide fancybox and set cookie to hide fancy box for 7 days
$.fancybox.close();
$.cookie(cookieName, true, { expires: 7 });
});
// Launch fancyBox on first element
setTimeout(function () {
$(".fancybox").trigger('click');
}, 2000);
});
Remember, this example will only work once, unless you delete the cookie, or change the cookie name.

YouTube API with Foundation Modal

I'm trying to show & autoplay youtube videos in a modal when a user clicks a link.
I have this working for the first video, however subsequent videos open the initial video.
During debugging, I noticed that the alert of the videoID fres as many times as the buttons have been clicked with the ID of the previous buttons. This seems like it is relevant.
<script src="//www.youtube.com/player_api"></script>
<script>
function onYouTubePlayerAPIReady() {
$('.feature-modal-btn').on('click', function(e){
e.preventDefault();
var btn = $(this);
//var modal = "#YTMODAL";
var ytVideoID = btn.data('ytvideoid');
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
alert(ytVideoID);
player = new YT.Player('feature-video', { //Add the player
width: '800',
videoId: ytVideoID,
playerVars: {
rel : 0,
theme : 'light',
showinfo : 0,
showsearch : 0,
autoplay : 1,
autohide : 1,
modestbranding : 1
},
events: {
}
});
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
$('#YTMODAL .flex-video #feature-video').remove();
$('#YTMODAL .flex-video #feature-video iframe').remove();
player = '';
$('#YTMODAL .flex-video').append('<div id="feature-video" />');
});
});
}
</script>
<a href="" class="feature-modal-btn" data-ytvideoid="o_nA1nIT2Ow" data-reveal-id="YTMODAL">
<a href="" class="feature-modal-btn" data-ytvideoid="p-iFl4qhBsE" data-reveal-id="YTMODAL">
<div id="YTMODAL" class="reveal-modal full" data-reveal >
<div class="video-container flex-video widescreen">
<div id="feature-video">[this div will be converted to an iframe]</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
I am using foundations modal reveal.
http://foundation.zurb.com/docs/components/reveal.html
How can i adjust my code so the correct movie is shown each time a link is clicked?
UPDATE
I created a codepen to show what's happening. try opening & closing the modals using the one & two links
http://codepen.io/anon/pen/HkoKg

This was just me getting my code muddled, not something specific to YT or Reveal working version in this pen
http://codepen.io/anon/pen/HkoKg?editors=101
$(document).foundation();
var ytvideoid;
$('.feature-modal-btn').on('click', function(e){
ytvideoid = $(this).data('ytvideoid')
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
//console.log(modal);
player = new YT.Player('feature-video', { //Add the player
width: '800',
videoId: ytvideoid,
playerVars: {
rel : 0,
theme : 'light',
showinfo : 0,
showsearch : 0,
autoplay : 1,
autohide : 1,
modestbranding : 1
},
events: {
}
});
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
$('#YTMODAL .flex-video #feature-video').remove();
$('#YTMODAL .flex-video').append('<div id="feature-video" />');
});

How to pass and set the slider image display time in jQuery?

I've used one image slider. The HTML and jQuery code for it is as follows :
HTML code :
<div class="leaderboard">
<ul id="demo1">
<li><img src="img/Slid1.png" alt="Lorem Ipsum"></li>
<li><img src="img/Slid2.png" alt="Lorem Ipsum"></li>
<li><img src="img/slid3.png" alt="Lorem Ipsum"></li>
</ul>
</div>
jQuery code :
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: 3000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
The necessary jQuery and CSS files have been already included.
This image slider is working perfect for me. But now I want to set some value in seconds (say for example 5 seconds. This is a variable value, it can be other than 5 seconds too.) for which each image from this slider appears. In other words I want to display each image for 5 seconds, as soon as 5 seconds are completed the next image should come.
How should I pass this value of 5 seconds to the above jQuery slider function and use this value into a function such that each image from slider will appear for 5 seconds?
Thanks for spending some of your valuable time in understanding my issue. If you need any more information regarding this issue please let me know.
Any kind of hep would be highly appreciated. Waiting for your precious replies.

for the slide to last 5s change the value
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: 5000,// changed from 3000(3s)
auto: true,
preload: 'visible'
});
you can get more information here http://slippry.com/settings/
Edit 2
you will need to do something like this
JS Fiddle

How can I use different hrefs in my fancybox call?

I have the following fancybox call:
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick' : false,
'scrolling' : 'no',
afterShow: function(){
//do some stuff
}
});
});
for influence on the following:
<img src="example"/>
what I would like to do is add the href to the fancybox call so that I can simply put a hash tag in the href in the html.
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick' : false,
'scrolling' : 'no',
'href' : 'example_url',
afterShow: function(){
//do some stuff
}
});
});
But I need to take it a bit further. Lets say I have three different items to consider:
<img src="example"/> //requires url-1
<img src="example"/> //requires url-2
<img src="example"/> //requires url-3
I know I need to give each one some type of unique identifier. Further, I realize I could just make three different fancybox calls for each one, but I think the better way to do it would be something like this:
$(document).ready(function() {
$('.fancybox').fancybox({
//do some processing here to find out what triggered the fancybox, then set a variable with the proper href based on that input. Could have a switch statement etc
'closeClick' : false,
'scrolling' : 'no',
'href' : //variable holding proper url
afterShow: function(){
//do some stuff
}
});
});
But I am having trouble making it actually happen how I envision!

EDIT: I should say that my example is using Fancybox 2, it will probably not work in the earlier versions
You can have the links carry a data-href attribute, which you can use in the fancybox call like this (fiddle: http://jsfiddle.net/xEtZ8/)
<a class="fancybox" data-href="http://fiddle.jshell.net/YtwCt/show/" href="#">URL 1</a>
<a class="fancybox" data-href="http://doc.jsfiddle.net/use/echo.html" href="#">URL 2</a>
And JS
$(function() {
$('.fancybox').fancybox({
type: 'iframe',
beforeLoad: function() {
this.href = this.element.data('href');
}
});
});