We Keep Coding

Loop fade in and out on video using jquery

Im trying to fade in on a video once it starts, fade out once it has ended and restart after, but I cant seem to get the right result.
Here is what I have to far:
var video = $('.central-video-wrapper video');
video.on('ended', function() {
video.fadeOut('slow');
video.load( function(){
video.fadeIn('slow');
});
});

You should use play and ended event for your purpose and in event handler use fadeIn() and fadeOut()
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
});
But if you want to fadeOut video onend and then fadeIn it and play it again, you can use setTimeout() and in it function use .play() to playing video.
var video = $('.central-video-wrapper video');
video.on('play', function() {
video.fadeIn('slow');
}).on('ended', function() {
video.fadeOut('slow');
setTimeout(function(){
video[0].duration = 0;
video[0].play();
}, 1000)
});
Check result in jsfiddle

You need to do that in callback function
video.on('ended', function() {
video.fadeOut('slow',function(){
video.load( function(){
video.fadeIn('slow');
});
});
});

Javascript: Putting a looping jQuery animation inside a js function

I want to nest a looping jQuery animation function inside a js function, and I can't figure out how to do it.
I have an audio file that plays when a div is clicked (and pauses if the div is clicked again), and at the same time the div text changes from a play symbol to a pause symbol. I want to animate another div while the music is playing, and stop the animation when the music is paused.
Here is my audio function code:
function play() {
var audio = document.getElementById('whatchaDoin');
if (audio.paused) {
audio.play();
document.getElementById('playButton').innerHTML = '\u2016';
} else {
audio.pause();
document.getElementById('playButton').innerHTML = '\u25BA';
}
}
And here's my animation:
$(document).ready(function() {
function animateBox() {
$('#greenBox').animate({
'margin-top': '20px',
'height': '150px',
'width': '150px'
}, 195).animate({
'margin-top': '30px',
'height': '140px',
'width': '140px'
}, 390, animateBox);
}
animateBox();
});
I can't seem to find a way to put them together without breaking the play function.
Thanks for any help you can give me!

This should work. I haven't tried it with an audio object, but the animation loop should be correct. Here is a jsFiddle without audio object:
https://jsfiddle.net/5fwdcq37/1/
The code below should be it with audio, important to know that when you stop an animation in jquery and you set the "jumpToEnd" flag to true it will fire the complete function. In your example before that would then again start the animation loop, so you would never be able to stop it. Therefore you need to add an additional variable loop to check if it is supposed to loop:
function play() {
var audio = document.getElementById('whatchaDoin');
if (audio.paused) {
audio.play();
document.getElementById('playButton').innerHTML = '\u2016';
startAnimation();
} else {
audio.pause();
document.getElementById('playButton').innerHTML = '\u25BA';
stopAnimation();
}
}
var loop = false;
function startAnimation(){
loop = true;
$('#greenBox').animate({
'margin-top': '20px',
'height': '150px',
'width': '150px'
}, 195).animate({
'margin-top': '30px',
'height': '140px',
'width': '140px'
}, 390, function(){ if(loop){ startAnimation(); } });
}
function stopAnimation(){
loop = false;
$('#greenBox').stop( true, true );
}
$( "#playButton" ).click( play );

How to fire event after 3 sec of hovering

I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});

You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });

Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>

Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.

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" />');
});

Hide iframe when Youtube video ends

Thank you everyone in advance.
I need some help hidding an iframe youtube video when it ends can someone guide me how to do that??
<iframe id="promo_video" src="http://www.youtube.com/embed/XzZudNOwkU8" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:228px;left:492px;" height="527" width="934" frameborder="0"></iframe>
i need something like this but i cant find how to make it
<script >
function myFunction()
{
if (promo_video.end=positive)
reload anotherother page
}
</script>

Hope this solution will work for you. The only change in solution is that you need only video id from iframe you have. Please refer the fiddle link mentioned below.
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'XzZudNOwkU8', <!-- video id should be here. last component from video URL -->
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#player').css('display', 'none');
}
}
</script>
Fiddle link