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>

Change YouTube video size with jQuery

I am trying to make a YouTube video width change when the "onStateChange" event fires on 1(playing) and then make it come back to its original size on 0(ended) and 2(paused).
I am very new to JavaScript and jQuery. But let's say I have this
<section><iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe></section>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
why does this jquery does not work?
jQuery(document).ready(function($) {
YT.PlayerState.ENDED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PAUSED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PLAYING = function(e) {
$('section iframe').animate({ width: "100%" }, 'slow');
}
the API information I have got comes from here https://developers.google.com/youtube/iframe_api_reference#Events

How to use loadVideoById

I got the Getting Started to work, but I would like to start the video at a certain time. Here's what I've tried so far:
var player = document.getElementById('myPlayer')
player.loadVideoById({
startSeconds:2,
endSeconds:4
})
<iframe id="myPlayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com">
</iframe>

You should use it like this:
loadVideoById({'videoId': 'bHQqvYy5KYo',
'startSeconds': 5,
'endSeconds': 60,
'suggestedQuality': 'large'});
You can also use player.seekTo(seconds:Number, allowSeekAhead:Boolean) to get to a time in your video
By the way your player variable should not be the iframe, in the Tutorial it states just at the beginning that it should be invoked by this:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
You should then use onPlayerReady to do your function

Stop Playing Youtube Video When Lightbox Is Closed

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?

`onReady` not firing

function onYouTubeIframeAPIReady() {
alert("onYouTubeIframeAPIReady Fired"); //This works
player = new YT.Player('player', {
//height: '390',
//width: '640',
videoId: buni_php_params.videoId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert("onPlayerReady Fired"); // This doesn't
event.target.playVideo();
}
The video loads and plays.
http://wppagoda.pagodabox.com/?p=1
I have a standard wordpress install for a plugin I'm making, it fetches a videoID from database (buni_php_params.videoId) and plays it. But the event onPlayerReady is never fired.… even though onYouTubeIframeAPIReady is fired.

When I have a problem of a function not being loaded I go for the window.myFunction approach rathen than just myFunction. This proved to be more portable between browsers as well.

well i dont want to sound an idiot, but it seems like you should add "()" to your onPlayerReady in the 'onReady': onPlayerReady,
So: 'onReady': onPlayerReady(), You're calling a function after all.
I might be wrong.