An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.
jquery.mb.components, another way of thinking the web
use a custom yutube player for a video as background on jQuery framework
Home Page: https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html
An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.
jquery.mb.components, another way of thinking the web
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!
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!
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)
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.
Not working With Iphone 5 and ipad ,any solution !!!
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
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?
Is it posible to activate audio when you hover over the video?
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?
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
Hi pupunzi , can you please tell me how to implement the fullscreen button a on single video , small player with Containment set to self ?
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?...
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!
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
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.
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,
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
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!
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
Tried a variety of videos - they load but playback is choppy for 2 seconds and eventually simply pauses. Occurs on both Windows and OSX.
Hi,
firstly great plugin very useful for my projects, but is it possible to remove the Youtube's Ads on the video ?
Greetz
Unfortunately I noticed a few 'bugs' (on PC):
In my console log on Chrome I see:
Uncaught TypeError: Cannot read property 'vol' of undefined
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?
If you have the YTPlayer as a element background, does it fall back to the youtube player? or does it fallback to an 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!
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?
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.
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:
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
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
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!
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.
Is that possible to make if it isn't yet?That tere would be no white(empty) div background.
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
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.
Hello
how can I set the background of the div to display an image when autoplay is set to false ?
Thank you
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?
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?
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.
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.
first thanx so god dam much for this ,
addRaster
as there is only true / false
,shouldn't it be there like another property that point to the raster img ?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?
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
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.
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
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!
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.