bento-n-box / jquery.youtubebackground Goto Github PK

I am a little confused why mobile is not supported? The standard iframe embed from YouTube works fine on mobile devices and you are embedding the player via iframe. This should be supposed.

Hello, my code is:

            $this.YTPlayer({
                fitToBackground: true,
                videoId: id,
                pauseOnScroll: false,
                playerVars: {
                    modestbranding: 1,
                    autoplay: 1,
                    controls: 0,
                    showinfo: 0,
                    branding: 0,
                    rel: 0,
                    autohide: 0,
                    wmode: 'transparent'
                }
            });

but youtube logo is still visible

just add @ line 270 before e.target.playVideo();

if (this.options.start > 0) e.target.seekTo(this.options.start);

Using the code below who containers and shields are injected.

<div id="ytplayer-container1493321939452">
and
<div id="ytplayer-container1493321939475">

The script is only included once within the entire site.

 jQuery('header#post-205-title').YTPlayer({
    fitToBackground: false,
    videoId: 'abc123bca321',
    pauseOnScroll: false,
    playerVars: {
      modestbranding: 1,
      autoplay: 1,
      controls: 0,
      showinfo: 0,
      wmode: 'transparent',
      branding: 0,
      rel: 0,
      autohide: 0,
    }
  });

I just got assign to fix the related videos in IE 11. Evidently "rel=0" doesn't work in IE 11. Anyone had to deal with this yet?

Hello i open de example in firefox and IE and the links no work, in google chrome is working
i cant do it working in firefox and IE

Even when looping, for a split second the related videos show up.
By adding { rel: 0 } to the playerVars I can remove this, but it probably should be default :)

Hi,
i add css vertical align in video container.

You solution:
.ytplayer-container { position: absolute; top: 0; z-index: -1; }

My solution:
.ytplayer-container { position: absolute; top: 50%; z-index: -1; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

Hi rochestb, thx for the nice script.
there is an issue when using it with
fitToBackground: false

you can see it when you resize the browser window.
http://rochestb.github.io/jQuery.YoutubeBackground/

i changed (LINE 223)
if (!self.options.fitToBackground) {
container = self.$node;
}

to
if (!self.options.fitToBackground) {
container = self.$node;
return;
}

to avoid resizing

I've successfully set a video as the background to a div however now when the video starts (and loops) the image inside the div is set to display:none. I've forced display:inline-block but each time the video loops the logo disappears and then reappears. Any ideas?

I created 2 buttons for play/stop and it doesn't work. My code below

$('#vidheader').YTPlayer({ videoId: ytLink, mute: false, playButtonClass: 'YTPlayer-play', pauseButtonClass: 'YTPlayer-pause', width: $(window).width(), playerVars: { iv_load_policy: 3, modestbranding: 1, autoplay: 1, controls: 0, showinfo: 0, wmode: 'opaque', branding: 0, autohide: 0, rel: 0 } });

<div id="vid_controls" class="glb-center"> <a id="play" class="YTPlayer-play youbtn youplay" href="#"><img class="glb-max-width" src="<?php bloginfo('template_directory'); ?>/img/play-movie.png" alt=""/></a> <a class="YTPlayer-pause youbtn youpause" href="#"><img class="glb-max-width" src="<?php bloginfo('template_directory'); ?>/img/play-pause.png" alt=""/></a> </div>

when I click on any of mu buttons nothing happenes. What's wrong with my code?

Is it possible to turn off YT annotations?

https://developers.google.com/youtube/player_parameters?hl=en#iv_load_policy

Hi
Chrome returned this error: Uncaught TypeError: window.YT.Player is not a constructor
On this line: self.player = new window.YT.Player(self.holderID, self.options);

Any idea?

the "start" param in options does not work.
I tried also to modify the default value in core module, but still not working... the video still starts from 0

Doesn't loop (and consequently shows related videos) in Safari on OSX. I had to specifically add in the loop and playlist parameters from the youtube api to make it work, but it's still jumpy.

Also, you might want to add something in that prevents click events. If you accidentally click the bg you will pause the video and on hover the youtube logo shows. Those can both be prevented by adding pointer-events:none to the css.

I put the JS and CSS in my HTML and ran the function but I get this error in my console

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://new.example.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

I can't change my site to SSL

Hello. I went on your example using Ipad Model A1490 version os 9.3.2(13F69) Chrome 63.03239.73 and noticed that the background video doesn't play. Could you research this problem? Thank you in advance.

UPD: I debugged this issue and discovered in console such messages

Problem locates in www-widgetapi.js on 96 line:

h.B = function(a) {
        a.id = this.g;
        a.channel = "widget";
        a = xa(a);
        var b = this.b;
        var c = Ba(this.a.src);
        b = 0 == c.indexOf("https:") ? [c] : b.a ? [c.replace("http:", "https:")] : b.c ? [c] : [c, c.replace("http:", "https:")];
        if (!this.a.contentWindow)
            throw Error("The YouTube player is not attached to the DOM.");
        for (c = 0; c < b.length; c++)
            try {
HERE --->>>   this.a.contentWindow.postMessage(a, b[c])
            } catch (d) {
                if (d.name && "SyntaxError" == d.name)
                    Ha(d, "WARNING");
                else
                    throw d;
            }
    };

I don't know... maybe you need use origin parameter in playerVars...or maybe it is the problem of youtube api ?

Youtube's iframe shows an ugly black background when the iframe is loaded but the video is still loading. Is there a way to prevent this?

Maybe there's a setting that makes it transparent, or a JS event can be fired when the video begins playing so we unhide a previously hidden iframe (opacity:0 or something similar).

It appears the script does not listen to:

playerVars: {
    autoplay: 0 
}

Having recently fixed an old website that was using this script I noticed I was unable to prevent autoplay, so I added this little workaround on line 272.

var $this = this;

setTimeout(function() {
    if(!$this.options.autoplay) {
        e.target.pauseVideo();
    }
}, 500);

The timeout function was so that the loading animation does not get stuck running. You should check this out.

Please consider the following code:

<div id="youtube_5BgZcS_3Lms" class="bm-background-video bm-background-video-yt" style="height: 450px;"></div>

<script>
jQuery('#youtube_5BgZcS_3Lms').YTPlayer({
    width: 1200,
    fitToBackground: false,
    videoId: '5BgZcS_3Lms',
    playerVars: {
        'showInfo': 0,
        'rel': 0,
        'modestbranding': 1,
        'iv_load_policy': 3,
        'origin': window.location.href
    },
    callback: onready_20d3e6a6ec79afbb68c9dd2745c48f72
});

function onready_20d3e6a6ec79afbb68c9dd2745c48f72()
{
    console.log( jQuery('#youtube_5BgZcS_3Lms').data('ytPlayer') );
}
</script>

For some reason, the console.log() for the ytPlayer data attribute returns undefined in the console, and I am not able to access the player property.

Doesn't seem like the bg-loaded class is ever added in safari or ie9. What can we do about this?

Line 29 of jquery.youtubebackground.js should be changed from

tag.src = 'http://www.youtube.com/iframe_api';

to

tag.src = '//www.youtube.com/iframe_api';

Hello @rochestb ,
I am the member of cdnjs project.
We want to host this library.
But there are some version problem.
In latest git tag v1.0.4, the version in src/jquery.youtubebackground.js shows 1.0.1, and the version in bower.json is also 1.0.1.
Please confirm this and fix it.
Thanks very much!

cdnjs/cdnjs#7837

when browser resizing, container can't get right scale.
so i thought you should divide code to resize part.

`
original version ----- start line number 227

  var width = container.width(),
    pWidth, // player width, to be defined
    height = container.height(),
    pHeight, // player height, tbd
    $YTPlayerPlayer = $('#' + self.holderID);

  // when screen aspect ratio differs from video, video must center and underlay one dimension
  if (width / self.options.ratio < height) {
    pWidth = Math.ceil(height * self.options.ratio); // get new player width
    $YTPlayerPlayer.width(pWidth).height(height).css({
      left: (width - pWidth) / 2,
      top: 0
    }); // player width is greater, offset left; reset top
  } else { // new video width < window width (gap to right)
    pHeight = Math.ceil(width / self.options.ratio); // get new player height
    $YTPlayerPlayer.width(width).height(pHeight).css({
      left: 0,
      top: (height - pHeight) / 2
    }); // player height is greater, offset top; reset left
  }

`

`
i suggest -------------------------------

  var width = container.width(),
    pWidth, // player width, to be defined
    height = container.height(),
    pHeight, // player height, tbd
    $YTPlayerPlayer = $('#' + self.holderID);

  if (!self.options.fitToBackground) { // container mode
    height = Math.ceil(9 * width / 16) ;
    $YTPlayerPlayer.width(width).height(height);
    if (width / self.options.ratio < height) {
      pWidth = Math.ceil(height * self.options.ratio); // get new player width
      $YTPlayerPlayer.css({
        left: (width - pWidth) / 2,
        top: 0
      }); // player width is greater, offset left; reset top
    } else { // new video width < window width (gap to right)
      pHeight = Math.ceil(width / self.options.ratio); // get new player height
      $YTPlayerPlayer.css({
        left: 0,
        top: (height - pHeight) / 2
      }); // player height is greater, offset top; reset left
    }
  }else{ // fullscreen mode
    // when screen aspect ratio differs from video, video must center and underlay one dimension
    if (width / self.options.ratio < height) {
      pWidth = Math.ceil(height * self.options.ratio); // get new player width
      $YTPlayerPlayer.width(pWidth).height(height).css({
        left: (width - pWidth) / 2,
        top: 0
      }); // player width is greater, offset left; reset top
    } else { // new video width < window width (gap to right)
      pHeight = Math.ceil(width / self.options.ratio); // get new player height
      $YTPlayerPlayer.width(width).height(pHeight).css({
        left: 0,
        top: (height - pHeight) / 2
      }); // player height is greater, offset top; reset left
    }
  }

`

i attached file as well, after i fixed it. it works very well
jquery.youtubebackground_avrilkim.js.zip

Hello @rochestb ,
I am the member of cdnjs project.
We want to host this library.
And I found that this library is published on npm.
And we prefer to use npm to auto-update the latest version you publish.
So please publish the latest release on npm.
Thanks for your help!

cdnjs/cdnjs#7837

Hi, I am receiving the error below, and no matter how much googling I do I can't clear it.

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

$(document).ready(function () { $('#video').YTPlayer({ fitToBackground: true, videoId: 'myvideoID' }); })

Tested in FF and Chrome and same error message in both.

Encountered this before? Let me know if you need any more info.

Hello.
Video isn't starting on iOS devices.

Hi,
thank you for this plugin, it's very useful.

Anyway, it returns the following error in the console:

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

I found this topic:
http://stackoverflow.com/questions/27573017/failed-to-execute-postmessage-on-domwindow-https-www-youtube-com-http
and it seems that changing the location.protocol to 'https' will fix the error. I tried it on my own project and it works fine without that error.

I would like to use your plugin without edit it, so I want to ask you if you are going to implement this solution (es. as parameter).

👍

Why my console after begins play video looks like a crap?

playerVars do not work, can you check this?

  playerVars: {
    modestbranding: 1,
    autoplay: 1,
    controls: 0,
    showinfo: 0,
    wmode: 'transparent',
    branding: 0,
    rel: 0,
    autohide: 0
  },

Is there a better way to load another video into the player? I am using the following, but is is not a seamless change to the next video

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

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

        // OnStateChange Data
        if (event.data === 0) {          
          console.log('video ended');
          player.loadVideoById({'videoId': 'UY3S3tO7frM',
           'startSeconds': 9,
           'endSeconds': 10
          });
        }

    });
}

The video is not centered.

I think it's a big issue for a background video ;)

Thanks a lot !

The video flickers at the end, and it's very annoying with short loops.

BUT if you set an interval shortly before the end and rewind, flickering goes. Also set repeat=false in defaults.

'onStateChange': function(e) {
          if (e.data === 1) {

            self.$node.find('img').fadeOut(400);
            self.$node.addClass('loaded');
            
            setInterval(function() { self.player.seekTo(self.options.start)}, RewindVideoAtTiming);
            
          } else if (e.data === 0 && self.options.repeat) { // video ended and repeat option is set true
            self.player.seekTo(self.options.start);
          }
        }

I set RewindVideoAtTiming manually, and setInterval isn't aware that playback could have been paused for scrolling, there must be less dirty way to do this.

Hello i am using your plugin in one of my project. The video is not working in chrome browser of iphone 6s plus.

Thanks

Hello,

Thanks for this plugin, although I can't get it to work inside a Slick slider. I'm using Vimeo urls and the player only gets applied to the first (visible) slide, not on the hidden ones. Please help!

Thanks!

Thanks for the great work you did! I'm discovering all the possibilities of Youtube API's and Rochestb plugin.

But I still have some troubles to Run a Playlist instead of a video ?

Is someone could help me ?

Thanks a lot,

Marc

The video won't mute in Safari (El Capitan) even with mute option set to true. I have check the demo page on safari and it also not muted.

not play video
i used to: phone 5, Google Chrome

Hi,

I'm trying to show a different div when a certain video ends. How can I achieve this? I know about the onStateChange event in the API but I can't figure out how to use this in combination with this jQuery plugin.

I've tried using the example code to check the state, ie

var player =jQuery("#myvideodiv").data("ytPlayer").player;
player.addEventListener("onStateChange", function(data){
console.log("Player State Change", data);
});

but the player variable is a null so any reference to this results in a JS error

This is fantastic!

Hi, is there anyway to lazyload the external scripts? I want to make website fast, so just put the image and after lazy loading the image, triggered your plugin, but seems not reached my goal!

 $('#video-thumbnail').lazy({
                afterLoad: function () {
                   jQuery('#top-video-bg').YTPlayer({          
                   videoId: $('#top-video-bg').attr('data-video-id' )  });                 
                }
            });

-- Sorry to create an Issue, this isn't really an issue --

I'm trying to create my own Youtube controle bar with Youtube-API. It works great. However, I have some troubles to link youtube player data's (Duration & Current Time : https://developers.google.com/youtube/iframe_api_reference?hl=fr#Retrieving_video_information ) to my slider bar (MDL slider : http://www.getmdl.io/components/index.html#sliders-section)

The selector stay at the middle of the bar slider...

Could someone help ? (link to the project, please keep it secret for now : http://mdaniel.fr/swirly/la-belle-musique.html - Press F11 for a better experience, and Chrome is more clean with it)

-- Code --

HTML :

<input class="mdl-slider mdl-js-slider" type="range" id="s0" min="0" max="???" value="???" step="1">

JS :

    function setCursor() {
        $("#s0").attr({
                              "max" : function(){ var player=$('#video').data('ytPlayer').player; return player.getDuration(); },
                              "value" : function(){ var player=$('#video').data('ytPlayer').player; return player.getCurrentTime(); }
                           });
    console.log("1 second");
    setTimeout(setCursor, 1000);
}

Thanks,

Marc

    $('#video').YTPlayer({
        start: 1000,
        videoId: 'LSmgKRx5pBo'
    });

Seems like the start option is not working?
Am I doing it wrong?

Hi, firstly thanks you for your cool plugin, it's really useful!

The videos aren't loading on mobile devices and tablets. Is there an option to set to try and launch the video on mobile devices?

anything possible? its like 300% for me

How i can change videoId with callback ?
Thanks

Happens here which is called here.
It mostly happens on windows.