We Keep Coding

how can i show loading gif when video loading from database like youtube

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>

Can´t stop/pause embedded youtube video (youtube api) inside lightbox by closing

I´m working on a Lightbox, where user can watch videos.
The Problem if i would close it by clicking outside of the container i will get the error "Cannot read property 'stopVideo' of undefined" but if i close it with the button, it works well.
$(function(){
var appendthis = ("look over jsfiddle");
$('a[data-modal-id]').click(function(e) {
$(window).resize();
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
$(".js-modal-close-vid, .modal-overlay").click(function() {
var player = $(this).closest('.modal-box').data('player');
player.stopVideo();
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
});
JsFiddle in the comment.

$(".js-modal-close, .modal-overlay").click(function() {
var player = $('.modal-box').data('player');
player.stopVideo();
player.seekTo(0);
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
The change was changing $(this).closest('.modal-box').data('player'); to $('.modal-box').data('player') and it works. I think the problem here was incorrect use of the closest method and the selector not being what you expected.
http://jsfiddle.net/4f5dksj5/6/

BXSlider Pause Youtube Video When Switching Slides

I have the following example of BXSlider, where I have 4 slides each having a Youtube video. The problem is that when I play a video and go to the next slide, it keeps on playing:
http://jsfiddle.net/isherwood/XWL9Y/
$(document).ready(function () {
$('.bxslider').bxSlider();
});
Can someone help out to make the youtube video pause when going to the next slide?

var slider = $("#gallery").bxSlider({
adaptiveHeight:true,
auto:true,
autoStart:true,
autoControls:true,
video:true,
onSlideAfter: function(slide){
if (slide.find("iframe:first").length) {
slider.stopAuto();
}
}
});
You might also be able to use something like slide.find("div.fluid-width-video-wrapper:first") if you use iframes for other things in the in the slider.
Source
----Update----
var slider = $('.bxslider').bxSlider({
onSlideAfter: function(slide, oldindex, currentSlide){
oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
youtubeVideo = oldSlide.find('iframe[src*=youtube]');
if ( youtubeVideo.length ) {
youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
}
}
});
Source
----Edit----
Also make sure to add ?enablejsapi=true to the the iframe src, otherwise the above JavaScript will not work (source).

After long search i found the solution. Try this:
onSlideAfter: function(){
jQuery("iframe").each(function() {
var src= jQuery(this).attr('src');
jQuery(this).attr('src',src);
});
}
This will stop all videos. It is basically resetting the video urls.

html5 video events when dynamically injected

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

How to play one video in jQuery tab and stop others?

I have 4 Jquery tabs, In each tab there is 2 videos. how I make one video play at the time and pause all others? and How make the video pause when I switch to new Tab?
this is the code Jsfiddle
/* play one video at a time */
$('video').bind('play', function() {
activated = this;
$('video').each(function() {
if(this != activated) {
this.pause();
}
});
});
/* get the active tab */
var active = $( "#issuestabs" ).tabs( "option", "active" );
/* pause all videos that are not in the active tab*/
if (!active) {
$("video").each(function(){
$(this).get(0).pause();
});
}
can anyone show me what is wrong?
thanks!

can you use:
$('.tab').on('click', function() {
$('.tabcontent:hidden').find('video').each(function() {
$(this).get(0).pause();
});
});
(where .tabcontent is the name of your content panels that are hidden/shown, the click function i showed is just an example since I do not know which library you are using for tabs.)