bento-n-box / jquery.youtubebackground Goto Github PK
View Code? Open in Web Editor NEWA wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
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
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?
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.
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!
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.
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';
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?
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?
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,
}
});
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).
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
Doesn't seem like the bg-loaded class is ever added in safari or ie9. What can we do about this?
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
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
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.
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 ?
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).
👍
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 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.
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.
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
This is fantastic!
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
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
});
}
});
}
How i can change videoId with callback ?
Thanks
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.
$('#video').YTPlayer({
start: 1000,
videoId: 'LSmgKRx5pBo'
});
Seems like the start option is not working?
Am I doing it wrong?
Hello.
Video isn't starting on iOS devices.
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?
anything possible? its like 300% for me
not play video
i used to: phone 5, Google Chrome
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?
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' ) });
}
});
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
},
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.
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.
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);
The video is not centered.
I think it's a big issue for a background video ;)
Thanks a lot !
Is it possible to turn off YT annotations?
https://developers.google.com/youtube/player_parameters?hl=en#iv_load_policy
Hello i am using your plugin in one of my project. The video is not working in chrome browser of iphone 6s plus.
Thanks
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%); }
-- 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.