Preventing black background while video loads about jquery.youtubebackground HOT 13 CLOSED

you can archieve this by hiding the video:

#video { background: white; opacity: 0; pointer-events: none; position: relative; }

and show it when its loaded (the class will be added by the jQuery.YoutubeBackground)

#video.loaded{ background: transparent; opacity: 1; }

Cheers,
Roman

from jquery.youtubebackground.

Alternatively use the Youtube Api to hide the Preload-Div when video gets played:

         var videstart = function() {
            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            $('#video').YTPlayer({
                fitToBackground: true,
                videoId: 'sULHzl_mgrI',
                pauseOnScroll: false,
                playerVars: {
                    modestbranding: 0,
                    autohide: 1,
                    autoplay: 1,
                    controls: 0,
                    showinfo: 0,
                    wmode: 'transparent',
                    branding: 0,
                    rel: 0,
                    origin: window.location.origin,
                    disablekb: 1,
                    fs: 0,
                    enablejsapi: 1,
                },
                callback: function() {
                    videoCallbackEvents();
                }
            });

            var videoCallbackEvents = function() {
                var player = $('#video').data('ytPlayer').player;

                player.addEventListener('onStateChange', function(event) {
                    console.log("Player State Change", event);

                    // OnStateChange Data
                    if (event.data === 1) {
                        $('.video-loader').hide();
                        console.log('video plays');
                    } else if (event.data === 0) {
                        console.log('video ended');
                    } else if (event.data === 2) {
                        console.log('paused');
                    }
                });
            };
        };
        videstart();

from jquery.youtubebackground.

Checkout the placeholder in the example. It's essentially just an image on top of the video that fades away based on when the video is ready.

from jquery.youtubebackground.

Is there a way to determine when the video is loading? I am trying to use a custom loader to take the place of the iframe until the video is loaded. I tried doing it via #video and #video.loaded but it doesn't seem to be working. Any ideas? I am not using the youtube api as it is too expensive (http wise) for my purposes.

from jquery.youtubebackground.

Sure, the video is technically loading until stateChange occurs. Or you can show loading based on the state:
https://developers.google.com/youtube/iframe_api_reference

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

from jquery.youtubebackground.

            player.addEventListener('onStateChange', function(event) {
                console.log("Player State Change", event);

                // OnStateChange Data
                if ([-1, 3].includes(event.data)) {
                    $('.video-loader').hide();

                } else {
                    $('.video-loader').show();
                }
            });

from jquery.youtubebackground.

Could this work the same way with react's Iframe component? I made a video api using the embedded youtube urls and I am fetching from that database and rendering Demo components. The demo components render totally normal as do the iframe components but the video sometimes doesn't load for a while and I wanted to use a loader to just place over the iframe.

from jquery.youtubebackground.

Unfortunately not, but you could just do the vanilla JS youtube iframe API. I have been meaning to re-write this in react but haven't had the time.

from jquery.youtubebackground.

Thank you for the quick responses by the way! Can I use it for the videos I currently have in my API? I wanted to use specific embeds from my YouTube account.

from jquery.youtubebackground.

Hey Marco, not sure I follow completely.

Yes, you should be able to leverage any youtube video unless it is private (unlisted works as well).

from jquery.youtubebackground.

So I have a projects page on my personal website. Rather than hardcode the seven embeds I chose to make a rails api, creating video objects which contain my specific videos for those projects (from my channel). I wanted to show that I have experience making my own datasets. So I grabbed the embed URL's for all of my videos and loaded them into my seed data (along with title, date, description, etc.) and am using that data to be the information for my demo react components. I am asking if I can using the iframe API to leverage the embeds in my dataset and determine whether or not the video has loaded or is still waiting to load. I am basically trying to lazy load my videos but instead of putting a placeholder than looks like the loaded video I want to just render my loader component on top of the video.

from jquery.youtubebackground.

you can archieve this by hiding the video:

#video { background: white; opacity: 0; pointer-events: none; position: relative; }

and show it when its loaded (the class will be added by the jQuery.YoutubeBackground)

#video.loaded{ background: transparent; opacity: 1; }

Cheers,
Roman

Where should I write this code in wordpress using elementor?

from jquery.youtubebackground.

@MtrIbnereza did you ever figure this out? We're having the same issue on an elementor site - the black screen covers the whole page when it loads.

from jquery.youtubebackground.