I'm creating a lightbox to play videos from youtube without a plugin, so far things are going well, but now I'm having a issue, I don't know how to make the youtube video stop playing when the Lightbox is closed, here's the code
//triggering or close the lightbox
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
// This loads the iframe only on click on the Lightbox Button
var iframes = $('iframe');
$('.show').click(function() {
iframes.attr('src', function() {
return $(this).data('src');
});
});
iframes.each(function() {
var src = $(this).attr('src');
$(this).data('src', src).attr('src', '');
});
Also I don't know how to make play only the vídeo from the button I clicked, because right now when I click on a Show lightbox button it's playing all the vídeos from the page and not just the current one from the button I clicked.
Here's the Jsfiddle exemple. HTML is included on it
Try taking a look at the YouTube Player API Reference
Below I incorporated the example code from the API reference into a modified version of your JSFiddle example:
<html>
<head>
<style>
/* CSS styles removed for brevity */
</style>
</head>
<body>
<div class="left">
<button class="show">Show lightbox</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
</div>
</div>
<div id="overlay" style="display:none">
<!-- LIGHTBOX CODE END -->
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
player.stopVideo();
});
$( '.show').on('click', function(event) {
$("#lightbox, #overlay").show();
player.seekTo(0, false);
player.playVideo();
});
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) { }
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) { }
</script>
</body>
</html>
Utilizing the API the above code stops the video when the lightbox is closed.
Note: I removed the second button to keep the code sample simple.
An easier way would be
$(player-selector).on("click", function()
{
$(this).html("").hide();
}
Isn't it correct?
Related
I Want to Like This
<script>
$("video").on("click", function() {
// All but not this one - pause
$("video").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
<video id=”myVideo” src="<?php echo $_REQUEST['video']; ?>"></video>
anyone can please help me please above is my code.
Thanks STACKOVERFLOW
Use the poster attribute and a class to add some style, and remove them on the canplay event.
$('video').on('loadstart waiting seeking stalled', function (event) {
$(this).addClass('loading');
});
$('video').on('canplay seeked play', function (event) {
$(this).removeClass('loading');
});
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video src="/videos/movie.mp4" poster="/images/poster.jpg" controls></video>
I have a div that has a full width video with position:absolute, that plays when clicking an image, and some text on top of the video.
What I want is when I click the play button for the text on top to fade out and after the text fades out, for the video to fade in and as well when I click the pause button for the video to fade out and after for the text to fade in.
I achieved something close to what I want but for some reason I cannot delay the video fadein the first time I click the play button. After the second click it seems to work fine.
Here is my code:
`<video preload="none" id="myVideo" width="100%" >
<source src="wp-content/themes/quill/images/video.mp4" type="video/mp4">
</video>`
`<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
<script>
$("#play").click(function(){
$("#pause").fadeIn(1000);
$("#myVideo").delay(1500).fadeIn(2000);
$("#play").fadeOut(1000);
$(".toph1").fadeOut(1000);
$(".toph2").fadeOut(1000);
$(".introduction").fadeOut(1000);
$(".howitworks").fadeOut(1000);
$(".logo").fadeOut(1000);
});
</script>
<script>
$("#pause").click(function(){
$("#play").fadeIn(1000);
$(".toph1").fadeIn(1000);
$(".toph2").fadeIn(1000);
$(".introduction").fadeIn(1000);
$(".howitworks").fadeIn(1000);
$(".logo").fadeIn(1000);
$("#pause").fadeOut(1000);
$("#myVideo").fadeOut(0);
});
</script>`
I added the scripts at the bottom of the page.
If you want to have a delay, try to use timeout function:
setTimeout(function() {
// do here..
}, 750)
Fadeout has another optional parameter that can be passed for an on complete function:
$( "#div" ).fadeOut( "slow", function() {
setTimeout(function() {vid.play();}, 750)
});
the function in the above call will only be triggered once the fadeout animation has completed. You will need to change #div to the correct ID.
http://api.jquery.com/fadeout/#fadeOut-duration-complete
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
I am injecting a video element into a div on click.
However, I can't get any events to run on that video there after.
Specifically, I want a pause button and for it to fade out when ended.
I can get it to work if I just put in in the html normally - so it must be that it doesn't know it's there when injected?
$('#play-video').on( 'click', function() {
$(this).fadeOut();
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$('#close-video').fadeIn();
});
$('#close-video').on('click', function() {
$('#full-video').pause();
});
$('#full-video').bind('ended', function(){
alert('video is over');
});
In a codepen: HERE
Any experience with this? Thanks.
You cannot execute video element methods on the $-wrapped element.
var $video = $('#some-video');
//**NOT OK**
$video.play();
//**OK** - executing the method on the base html video element
var video = $video[0];
video.play();
Here is a working example
try this.
$('#play-video').on( 'click', function() {
$("#video-container").html("<video controls class='fillWidth' style='width:100%;' id='full-video'><source src='http://brightcove.vo.llnwd.net/yaddayadda'/><source src='http://sitedsfa.com/yaddayadda' type='video/webm' /></video>");
$(this).fadeOut('fast' , function() {
$("#full-video")[0].play();
$('#close-video').fadeIn();
});
});
$('#close-video').on('click', function() { $('#full-video')[0].pause(); });
$('#full-video').bind('ended', function(){ alert('video is over'); });
I want to hide iframe and show image thumbnail when iframe video
playback reaches the end. But none of the Vimeo player api event
working. Can anybody help me? Here is my code:
fiddle
$("#video .playBtnOrangeMid").click(function(){
$(this).hide();
$("#video1").attr("src","http://player.vimeo.com/video/69185765?color=de641b&autoplay=1&api=1&player_id=video1");
$("#video").css("background","none");
var iframe = $('#video1')[0],
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', function(){
$("#video .playBtnOrangeMid").show();
$("#video1").attr("src","");
$("#video").css("background","url(../images/thumb1.png)");
});
});
});