pupunzi/jquery.mb.ytplayer

use a custom yutube player for a video as background on jQuery framework

jquery.mb.YTPlayer

An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.

go to the demo

go to the doc

go to the blog

jquery.mb.components, another way of thinking the web

Now available also for Vimeo:

https://github.com/pupunzi/jQuery.mb.vimeo_player

jquery.mb.ytplayer's Issues

Setting startAt on videoChange

Hi pupunzi.

I can't find in the documentation examples on setting startAt on videoChange. Is this supported by the plugin?

I am setting the parameters like this
.changeMovie({videoURL:'http://youtu.be/xxxxxxxxxxx',startAt:30,quality:'hd720'})

Thanks for sharing your great plugin with us!

jquery.mb.YTPlayer Firefox not respecting the quality option.

Hi there,
I have a youtube video embedded with the plugin and have specified 'hd720' as quality. It plays all sharp and HQ on Chrome, Safari, IE but firefox has it all blurry. Seems to ignore the setting.

Any ideas ?

K

Uncaught TypeError: Cannot read property 'extend' of undefined

Hi pupunzi,
Thank you for this great plugin.
I just notice that with latest version, it shows an error:
"Uncaught TypeError: Cannot read property 'extend' of undefined"

To fix this, please change $.extend to jQuery.extend
Thanks,

Player hides in Chrome and Opera when playing and is visible when paused

First of all: Thank you for this great plugin!

The player is working in FF without any issues, however, in Chrome and Opera (and probably Safari) the player hides itself when playing. The video is still playing somewhere in the background, but the screen isn't visible anymore. When the video is paused, the screen shows up again.

It almost looks like the player forces the containing div to hide itself. I've added some css settings such as positioning, z-index and display settings, but none of them work.

I tried different containment settings (body, self), but nothing seems to work.
Any help is apreciated, thanks in advance!

showControls boolean = video doesn't play

Good day,

I am using this jquery to using YT video on background. It's working very well but I want disable YT controls and logo. If I disable (boolean) showControls, the video doesn't play. Do you know why?

Thank you very much and sorry for my bad english

jquery.mb.YTPlayer demo-bugs?

Unfortunately I noticed a few 'bugs' (on PC):

• the 'demo_videoList.html' on Internet Explorer 10 plays always the same video; on Safari 5 and Opera 12 does not autoplay
• the 'demo_videoList_autoChange.html' on Opera 12 jumps continuosly to nex video, without playing one fully..
  what a pity..

How to remove YTPlayer

First I have to say, great job, your plugin is the only one that works right away! But sadly I have not found any way to destroy the player and reinitialize it later on. I want the user to activate / deactivate the background video in a specific div.

EDIT: there is a method "playerDestroy", but after a call to that method you can not play videos anymore (as long as you do not reload the page)

How to set a background-image (desktop .. mobile)

Hi Mb,

How can I set a background-image when the video is preloading. And: In my use case I would like set an Image für Mobile device (like, iphone, android, tablets). But how?

Not working With Iphone and Ipad

Not working With Iphone 5 and ipad ,any solution !!!

getPlayer() undefined

In using your great plugin (thank you), I'm getting a couple of errors:
#1:

HTML:

JavaScript:

var playerState = $("bgVideo").getPlayer().getPlayerState();

yields the error: getPlayer() is undefined

Any insights?
#2

I'm also getting network errors:
"NetworkError: 403 Forbidden - http://r8---sn-jvhj5nu-a5ml.googlevideo.com/videoplayback?algorithm=throttle-factor&burst=40&clen=2046134&cpn=fcElJNyKHjKtXyLt&dur=64.156&expire=1386229362&factor=1.25&fexp=936912%2C936910%2C923305%2C936913%2C907231&fr=yes&gir=yes&id=ec6041f3b2fef9c3&ip=69.138.22.50&ipbits=0&itag=141&keepalive=yes&key=yt5&lmt=1386194915727331&ms=au&mt=1386207763&mv=m&range=0-479231&ratebypass=yes&signature=9A13B4449A65C84FE78517F64E095383CD797BBB.30DB249B574D23448E1889868DD27A7C87852CE0&source=youtube&sparams=algorithm%2Cburst%2Cclen%2Cdur%2Cfactor%2Cgir%2Cid%2Cip%2Cipbits%2Citag%2Clmt%2Csource%2Cupn%2Cexpire&sver=3&upn=KODVZZlLdHA"

Any insight?

Otherwise all working fine. Thanks!

Prevent final fadeOut

Hi!

first of all, thank you very much for this great plugin. It is very useful!

I have some problems with the fadeOut effect applied to the videos around the last 2/3 seconds at the end part. This option is cutting some videos and I´d like to know how to remove it.

Thanks!

Not working in Chrome/Win 8.1

Hello:

I love your plugin and it was very easy to implement. It works beautifully in IE/Safari/Firefox, but it will not work for me in Chrome. I'm running v35.0.1916.153 in Win8.1, and both of my PCs are touch screen. And I am not working locally... my files are on the server. http://000ae.hhrealestatemedia.com.

Any ideas?

Regards,
Angela

Question & Feature Request.

first thanx so god dam much for this ,

• The Question
  i wanted to ask how to use the addRaster as there is only true / false ,shouldn't it be there like another property that point to the raster img ?
• The Feature Request.
  isn't it possible to make the plugin work with Vimeo as-well ,i know that lots of the current props wont work but i mean cant we add a link to Vimeo and the plugin stretchs it beyond the container size in-order to hide the controls & other stuff that is not possible to change with the plugin.

Voice activation on mouse hover.

Is it posible to activate audio when you hover over the video?

Video time being cut off

I have a video that is 1:01 minutes long and it's being cut off at 57 seconds. I don't have stopAt in my data properties. Any idea? I also have it on autoplay

Not working in latest Chrome?

Hi,
the demos don't work in the latest Chrome for me (29.0.1547.76 on OSX). They play fine in Firefox and Safari though.
Any ideas?

jquery.mb.YTPlayer and loop:false

I noticed that if you set the loop option to false, the video does not start playing, although autoplay is on. This concerns Opera 12 and Safari 5 on Windows 7. I hope there is a solution to this. Thanks.

mb.YTplayer and Contact Form 7 (WP Plugin)

First of all; thanks for the amazing script, it works great!
I only detect an issue when I have mb.YTplayer (not the WP plugin) running on my website and I install the 'Contact Form 7' WordPress plugin. The video (or script?) stops working..

When I deactivate the CF7 plugin, the video (or script) starts working again.

vol not being set

hey,

even though I have set the initial volume using the vol: 20 option it's not being set, I still get full volume.

is this a bug, can someone help?...

Conflict with bootstrap collapse

My bootstrap accordion doesn't work when I use YTPlayer, displaying javascript error
"Uncaught TypeError: Cannot convert undefined or null to object" on click. Please help!

autoPlay: true stopped working

It was working for a while, but I noticed it randomly stopped working for me this morning and now the user needs to click the play button (or use .playYTP()) to start the video.

It looks like in YTPlayer.checkForStartAt interval line 356:

if (YTPlayer.player.getCurrentTime() >= startAt && YTPlayer.player.getDuration() > 0) {

YTPlayer.player.getCurrentTime() is 0 and startAt is 1 so it never plays, but in my settings I have startAt: 0

Edit:
switching YTPlayer.opt.startAt ? YTPlayer.opt.startAt : 1;
to YTPlayer.opt.startAt ? YTPlayer.opt.startAt : 0;
fixes the issue, but seems like it could be some bigger problem

Version 2.7.0

getPlayer() undefined on mobile browsers

Using version 2.6.0. I fixed this by changing line 304 and 305 to:

'onReady': function(event){
YTPlayer.player = event.target;

Seems to work.

Video getting cropped as background video and not optimizing display

Hey, great plugin. My only issue is that my background video is getting cropped, I have set the optimizeDisplay to true but it is having no affect. I had this working fine with a previous version of the plugin. I am now using the latest version. You can see my issue here: http://dev.aaronpitts.ch/hg/

Many thanks

Not working in Firefox 27.0.1

The plugin doesn't work in the lastest version of firefox.
I think youtube change their api rules but I'm not sure.
Do someone else has problems with firefox ?

UPDATE : The problem is not with Firefox, but with the Firefox's plugin YouTube Center (http://userscripts.org/scripts/show/114002), when he’s activate, YTPlayer doesn’t work.

Video appears but doesn't playback correctly in Safari (Windows & OSX)

Tried a variety of videos - they load but playback is choppy for 2 seconds and eventually simply pauses. Occurs on both Windows and OSX.

mobile/tablets fallback

Great plugin!

How can I display an image fallback on mobile devices/tablets ?
Is this possible ? If so, how? I do have Modernizr.

Thank you!

YTPlayer stopped working

It seems that the plugin isn't working anymore. I've just downloaded the demo files, and they're also not working -locally- anymore. They did work a while ago. While that's not a really big issue, the YTPlayer sometimes also doesn't work on a server anymore.

What could this issue be?

Controls state does not change when Play/Pause and Mute/Unmute

Stopped working

For some reason about 2 weeks ago it has stopped working on my website http://www.profitlocal.com.au I would love to know how to fix it :) please

lmage when autoplay set to false

Hello

how can I set the background of the div to display an image when autoplay is set to false ?

Thank you

How to remove Youtube's Ads ?

Hi,

firstly great plugin very useful for my projects, but is it possible to remove the Youtube's Ads on the video ?

Greetz

Cant disable video loop

Cant disable video loop - here is the code used (it's a shortcode)

a id="bgndVideo" href="'.$video.'" class="movie" data-property="{opacity:1, isBgndMovie:false,loop:false optimizeDisplay:false, showYTLogo:false, showControls:true, ratio:''.$ratio.'',startAt:0,quality:'hd720',addRaster:true,lightCrop:true,autoPlay:'.$autoplay.', containment: '.vid'.$rand.''}"

using this script version
last modified: 01/04/13 11.00

Autoplay and playYTP() Not Starting Video

I have an overlay div showing while the video loads to prevent flickering, but if you disable it, you'll notice that the video shows only the cover image and doesn't autoplay despite having the autoplay: true option set. Also, if I send the command, jQuery('youtube1').playYTP() through the console, the overlay disappears, but the video again fails to start.

This may be a change in the YT API, since this functionality was working fine before.

Thanks for the help. Here's a demo site to see what I mean:

http://wptrunk.notne.com/

Fallback

If you have the YTPlayer as a element background, does it fall back to the youtube player? or does it fallback to an image?

Video Doesn't Play Correctly

Hi,

I'm not edit any code, just change url, what I see is, it will skip about 4 seconds of video. 1 seconds on begininng and 3 seconds at end. If video about 0:50 seconds, it's will stop at 0:47 seconds. How to fix it?

Play/pause and other Icons not showing in control bar for background video

I am using this script in word press theme . This working fine for youtube video as background video ,but inside control bar there is not any play/pause mute/unmute icons. I have all those icons in Images folder at root of wordpress.
I go through Js file where I found lines:

controls : {
play : "",
pause : "",
mute : "",
unmute: "",
onlyYT: "",
ytLogo: ""
},
rasterImg : "images/raster.png",
rasterImgRetina: "images/[email protected]",

What I need to change in those above line to have icons in contole bar for wordpress theme?

Not available through Bower

I see you have .json file, however it seems that the package is not registered with bower, so I can't find the plugin via bower search.

feature request: stopAt

Hey!

Awesome work you did with this plugin!

I wonder if it would be possible to add a stopAt function to the code?

Could work similar to the startAt, but with negative values like:

stopAt: -15 to make it stop 15 seconds prior to the video end.

Let me know if I can do anything to assist you with this.

//Aleksander

jQuery syntax error in Chrome

It seems that after Chrome's latest update the background player isn't working.

Try opening the demo file from the download: singleMovie.html, no background movie is displayed and the Chrome console shows:

Uncaught SyntaxError: Unexpected identifier jquery.mb.YTPlayer.js:85
Uncaught TypeError: Object [object Object] has no method 'mb_YTPlayer' singleMovie.html:52

Can someone confirm this? and even offer a fix?

Player stops working when visitors are logged in at youtube

Hi,

as mentioned above, the player stops working if the user is logged in at Youtube or similar Google services. This issue only occurs in Chrome. Think it's related to this thread here: http://code.google.com/p/gdata-issues/issues/detail?id=5788

Any help is appreciated!

Thanks for such a great script.

Image preview before loading video

Is that possible to make if it isn't yet?That tere would be no white(empty) div background.

Fullscreen for Containment:self

Hi pupunzi , can you please tell me how to implement the fullscreen button a on single video , small player with Containment set to self ?

latest build not working in any browser

Hello,

I've installed jquery.mb.YTPlayer in the basic Twitter Bootstrap template, added jQuery.js and others, although player is not working. JS runs fine as I've tested it with

<script> alert($(window).height()); </script>

Also no errors in console, address: www.emalihin.com/2

Please advise if there's anything else I've missed?

Regards
Eugene

Video in Firefox will not played.

Firefox is not playing html5 videos. The video tag can added to dom witch is html5 indicator of plugin, but firefox has some trouble with the html5 googlevideo service.

So i think the webdeveloper should decide that he wants html5 or not.

I suggest that ytplayer plugin provide a setting variable to configure that.

Video position fixed in container

Hey,

Awesome plugin.
I have a question: is it possible to make the video fixed inside a container, while scrolling the container? I'm using the plugin to generate YouTube video backgrounds for different page sections with content and want to make the videos fixed. When it comes to images, background-attachment: fixed; works great, but on this case, it looks like it`s a bit more complicated.

Regards!

playlists

Hi, the YTplayer is being used in a Joomla template, Cashemir, that I have purchased.
I am trying to figure out if YTplayer can play YouTube playlists.
I have tried inserting one (PLTKV7BkhP7i0rWOaChXnqckJV_7-IKgdt) but it doesn't seem to be working.
Can the YTplayer handle a YouTube playlist (instead of manually inserting a number of videos in the script)?

Carsten.

Black bar in the top of fallback cover image

Hi pupunzi, thanks for such a great work.
The script is working good in the desktop browser, however when I opened the page in the mobile browser (I tested with iphone and ipad) there's a black bar in the top of fallback image. Can you check it?
Thanks!

Removed

Doesn't work

In my console log on Chrome I see:
Uncaught TypeError: Cannot read property 'vol' of undefined

jquery.mb.YTPlayer stopped working

Hi,

My jquery.mb.YTPlayer suddenly stopped working.
Today I also downloaded the lastest version, it's here:
http://martijnmendel.com/test/demo.html

In this version I did NOTHING with it. It just comes right from the download folder on my server.
I used it here integrated in my layout, doesn't work too anymore (it did before):
http://martijnmendel.com/website/index2.html

I don't know what I don't see here.. what is the problem?