stamat / youtube-background Goto Github PK

I had this issue reported all the time. And I know Youtube API has removed the function already. How do I make this error go?

This will require better code structure - so do your refactors

Hi,

First, very thank you to create this addon !!

In js, i add property "load-background" to false but try to still load the "maxresdefault.jpg" from YT ?
jQuery('#the-video[data-youtube]').youtube_background({'load-background': false});

An idea ?!

Thank you,
Nicolas

First of all thanks for making this plugin, it has been working great for me for months now!

However, suddenly my websites background video is no longer full screen, but is instead loading only full height of the enclosing div, and no longer covering the full width. It appears to load on the right side of the container. I don't think it is related to my site styling, as the demo page for this on your site is now loading off to the right side as well.
https://frontbackend.com/simple-jquery-plugin-for-embedding-youtube-videos-as-a-cover-background

Is this a change in the YouTube video API breaking this, or something that could be resolved?
Thanks for your time.

I went from 99 to 40 on page speed with this. It is complaining about the Youtube JS. Just wondering if anything can be done? I did see someone made a YouTube lite js that maybe could be used in combination? https://github.com/paulirish/lite-youtube-embed. Thank you for all your work! Do you think mp4/webm would be better for SEO/Pagespeed over Youtube?

Example on your demo page: https://pagespeed.web.dev/analysis/https-stamat-info-youtube-background/5yoh9d0cn7?form_factor=mobile

First thank you for making this!

I saw you have 'Add another wrapper so video can fade in when loaded' in the todo list, which might fix this issue.
Is there anyway to make the video load a bit later or hide it so it doesn't appear?

Thank you!

Exemple.
glightbox https://github.com/biati-digital/glightbox

glightbox not open video then "jquery.youtube-background" plugin work.
How can stop or pause jquery.youtube-background?

My video on YT is 1080 but when i embed it using this code the video looks to be a much lower resolution.. Is there a way to force it us use the highest quality available??

Sorry to open this issue, but I can't seem to pick up any events being dispatched by the YoutubeBackground class, through the VideoBackgrounds class.

I'm initialising like this:

const videoBackground = new VideoBackgrounds('[data-vbs]');

And I've tried listening for the video-background-play event via various methods:

window.addEventListener('video-background-play', function(e) { alert(e) });
document.addEventListener('video-background-play', function(e) { alert(e) });
document.documentElement.addEventListener('video-background-play', function(e) { alert(e) });
const embedTargets = document.querySelectorAll('.class-name-i-added-to-the-data-vbs-elements')
if (this.embedTargets) {
    this.embedTargets.forEach((elem) => {
        elem.addEventListener('video-background-play', this.videoHasStarted);
    });
}

and so on...

I can see that the YoutubeBackground class is dispatching these events, for example: https://github.com/stamat/youtube-background/blob/master/src/youtube-background.js#L130

But I can't pick them up it seems!...

Any help much appreciated, many thanks.

First, thank you so much for making this public.

I tried to recreate your demo with non-jquery but it is not working. Please see codepen https://codepen.io/tkruger/pen/poQGWNW

I used new VideoBackgrounds('[data-vbg]'); to call the script.

Any help would greatly be appreciated! Or if you could post a demo without jQuery (and font awesome if possible) that would rock. Trying to avoid large JS libraries when creating features for a website.

Hi. I found a couple of bugs that make it a little difficult to work.

First: when using html video, you cannot run it without sound. I tried specifying parameters inside the div tag, and also passing them during the function call. I can still control the volume using the suggested functions mute() and setVolume(), but it would be more convenient to run the background video without sound by default. Because of this bug, an error appears when the browser does not allow the automatic launch of a video with the sound turned on.

Second: if you pause the video, and then scroll the page and return to the video, it automatically continues playing, although the indicator shows that it is paused. After this, to pause playback again, you need to press the button to “unpause”, and then press again to pause.

Both of these errors are also present on the demo page of the project.

Lighthouse tests complain that iframe does not have a title .

I added playerElement.setAttribute("title", "Video Player"); in my copy to resolve.

The youtube player api gets injected even when there is no data-vbg on the page.
Also gets injected when the data-vbg has a vimeo link.

Hello!
I can't unmute the Video looked through the html and js files but didn't found out how.
Can someone please help me?

Can we play video with sound on by default ?

Now when i load document (with original script) i have error :

thank you for helping me

Uncaught ReferenceError: wrapper_styles is not defined jquery.youtube-background.js:562

change "link" in code youtube-background.js > line 144

144 > let src = "https://www.youtube.com/embed/....
to
144 > let src = "https://www.youtube-nocookie.com/embed/....

No matter where I set it, I can't seem to get autoplay to set to 0. I know the script is just creating an autoplay parameter on the iframe URL, but no matter if I set it in JS or in the HTML, it is always autoplay=1

For unlisted Vimeo videos is there a way to append the h=xxxxxxx param to the url so that the video can play? It appears to be removed when initiated.

hi, currently i used your library video background to embed my videos. I did following the documentations , and i realized there is something wrong with the videos. everytime i reload the page, the cover is missing for a while. here is the screenshot

Some videos don't have a maxresdefault.jpg and the preview is missing

This video don't have the maxresdefault.jpg image:
maxresdefault

However, hqdefault.jpg image is available
https://img.youtube.com/vi/JmIZb859q_o/hqdefault.jpg

hi!
is there a way to remove the title on the initial load of the yt video?
this example is using your library and no title appears: https://codepen.io/songyima/pen/VKbyYG?editors=1000
i can't figure out how he did it, the
showinfo: 0
is already set but it still shows the title.
can you help?

Having an issue where I can't seem to be able to disable video background for mobile. Doesn't seem to work even if explicitly setting data-vbg-mobile="false".
Any help would be appreciated.
Thanks

I was wondering if you plan to revisit the tasks on your to-do list and finish some of the points you've planned to implement:

Specifically I'm interested to know about the pause-while-hidden features.

Please respect and add support for the reduced motion query by adding an image fallback. Add a pause button. Respect motion sickness – please add a pause button

My own picture doesn't work
data-vbg-poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
The script uploads its own picture from YouTube

Referring to the image below; when I paused the video player, the "explore video" tab popped up at the bottom of the screen. Is there a way to disable it?

Thank you for taking your time to read this.

https://github.com/stamat/jquery.youtube-background/blob/f9ad26d3aacc40b73d744f6d1fbcc9c8122a7ad0/src/youtube-background.js#L194

When i set the div attributes to for example:
data-ytbg-fit-box="false" data-ytbg-offset="20"

the width would be set to 192020px instead of 1940px.

there's any option to update the video URL,
I tried to change data-vbg attribute and call jQuery('[data-vbg]').youtube_background() without any luck

Hi developers,

I discovered this issue when I tested it on a simulator(Inspect tool on Chrome browser) and a mobile device (iPhone 12, Chrome).

The video played automatically on a mobile device, but when I switched between tabs, it stopped. Following is the jQuery I put in,

jQuery('[data-vbg]').youtube_background({ 'lazyloading': true, 'always-play' : true, 'mobile' : true, 'loop' : true });

Just wonder if anyone experienced the same issue.

Thank you,

Hi,

Thanks for this repo.
Could you add a Mute true/false Properties ?
Thanks a lot.
RodMar

It can successfully install for 1.0.14 but failed after 1.0.15 and upper.

Error message:

error https://registry.yarnpkg.com/youtube-background/-/youtube-background-1.0.15.tgz: Extracting tar content of undefined failed, the file appears to be corrupt: "ENOENT: no such file or direct
ory, open"
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I assume that is the emoji file name break Windows path, since this project start using POOPS after 1.0.15.

See compare: 1.0.14...v1.0.15#diff-7134ec4840db4910869cf3cd4ad97314bc0c615a2d11a0ef9b7d0b2ea6be7cef

Yarn: v1.22.17
Windows: 10
Node: 16

Is there a way to control the volume of the video being played if its not muted? I know setVolume() exists but can't seem to get it to work.

My sad attempt:

$(document).ready(function() {
    $('[data-vbg]').each(function() {
        $(this).youtube_background();
        $(this).find('iframe')[0].setVolume(0.15);
    });
});

youtube-background div was not covering the parent element; besides, right-mouse click on the background shows an ugly popup menu.
Solved it by adding some style to the injected youtube-background div:

            $root.css({
                'height': '100%',
                'width': '100%',
                'z-index': 0,
                'position': 'absolute',
                'overflow': 'hidden',
                'top': 0, // added
                'left': 0,
                'bottom': 0,
                'right': 0,
                'pointer-events': 'none' // avoid right mouse click popup menu
            });

https://unpkg.com/browse/[email protected]/jquery.youtube-background.js

should be

https://unpkg.com/[email protected]/jquery.youtube-background.js

Wondering if there's anything I can do to improve the quality of the embedded YT stream when viewing on iOS Safari.

Same page viewed on a desktop (reasonably recent Macbook / Chrome) looks to be playing HD (in whatever capacity) but the same page on the same local wifi connection viewed on iOS Safari is horribly pixelated.

Are there any parameters/config values I can tweak?

Cheers.

on mobile neither video is playing, nor mute and pause buttons are showing.

why?

I'm using this js for my site djalerossi.com

There are 4 sections with different heights that change without page refresh, nor window resize.

When I switched to a "taller" section/tab, the background shifted down to be vertically centred, leaving space above and below the background iframe.

I'm not an experienced programmer, but I found a quick-fix solution, and now the background iframe resizes correctly when the BODY element changes in size.

This is the part of the code I frankeinsteined (note that in my case I use the background as "cover", thus the bodyElement and not the more flexible parent element...)

if (this.params['fit-box']) {
  this.iframe.style.width = '100%';
  this.iframe.style.height = '100%';
} else {
  const self = this;
  const bodyElement = document.querySelector('body');

  //TODO❗️: maybe a spacer or at least add requestAnimationFrame
  function onResize() {
    const h = bodyElement.offsetHeight + self.params.offset; // since showinfo is deprecated and ignored after September 25, 2018. we add +200 to hide it in the overflow
    const w = bodyElement.offsetWidth + self.params.offset;
    const res = self.params.resolution_mod;
    if (res > w/h) {
      self.iframe.style.width = h*res + 'px';
      self.iframe.style.height = h + 'px';
    } else {
      self.iframe.style.width = w + 'px';
      self.iframe.style.height = w/res + 'px';
    }
  }

  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      const h = bodyElement.offsetHeight + self.params.offset;
      const w = bodyElement.offsetWidth + self.params.offset;
      const res = self.params.resolution_mod;
      if (res > w/h) {
        self.iframe.style.width = h*res + 'px';
        self.iframe.style.height = h + 'px';
      } else {
        self.iframe.style.width = w + 'px';
        self.iframe.style.height = w/res + 'px';
      }
    }
  });

  resizeObserver.observe(bodyElement);
  window.addEventListener('resize', onResize);
  onResize();
}

For sure there are more sophisticated ways to code it, I'm more of a front-end developer/designer...

I hope this suggestion helps you fix the issue in a more elegant way.

Thanks

Hi, I get this error when trying to load the background using
jQuery(document).ready(function () {
jQuery("[data-vbg]").youtube_background();
});
new VideoBackgrounds("[data-vbg]");

And the default demo code doesn't work for me. Has Youtube released a breaking change to the app?

I'm using this in a slider and adding video to slides background.

I'd like to pause the video on the hidden slides and resume on the one currently in view.
I can handle the slider events, but I can't find the objects on which to call the pause() and play() methods.

//this is how I call the background init, it works great, the videos are initialized and start playing:
    $('.youtube-background[data-youtube]').youtube_background(); 

//and this is how I try to manipulate the video players
    $(window).bind("load",function(){
        $('.swiper-container' ).each(function(i){
            var swiperInstance = $(this).data( 'swiper' );
            swiperInstance.on('slideChange', function(){
//this returns a collection of slides:
                var video_slides = $(this.slides).find('.youtube-background');
// i've tried $('[data-youtube]'), but there is no such thing, apparently the script removes the data attribute of the element once youtube_background() has been called on it
                video_slides.each(function(i){
                    if (typeof $(this).pause === "function") {
                        $(this).pause(); //this is never reached
                    }
                });
                $(this.slides[this.activeIndex]).find('.youtube-background').each(function(i){
                    if (typeof $(this).play === "function") {
                        $(this).play(); //also never reached
                    }
                });
            });
        });
    });

Hi, first of all: Thanks for offering this jQuery plugin for embedding YouTube videos as cover background. I do have some issues when i'm running this though. I hope you can look into this.

Here are some screenshots for better understanding: https://imgur.com/a/AlqKVc8

Hi I request this generally as I think something in the readme about this would be really useful.

My request comes because I am indeed having problems getting the code to work. No JS errors. It's definitely being called but it just doesn't insert the player into the DOM. A search of the DOM with the browser dev tools confirms that. It's also the same, irrelevant if I specify a YouTube or Vimeo url. I also have no custom options defined.

Any general ideas on where to go to troubleshoot?

This is a nice plugin with custom controls to play background videos, but its not working when I am testing on small devices. Can you please fix this.

Can I keep it 16:9 ratio instead of 100% vh?

$(document).ready(function() {
$('[data-vbg]').youtube_background({
'start-at': 7,
'end-at': 161,
'load-background': true,

    });

});

This error appears in console sometimes and sometimes stops the video from loading:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin

I would like to have the option to turn inline stylings off in favor of me adding them via css and being able to avoid using !importants