jquery.mb.YTPlayer

A chrome-less player for YouTube movies!

Use this player to show your favorite YouTube movies on your page! Or easily transform your Youtube movie into a HTML background!

Tips and tricks:

You can easily create a background video switcher as the button below:

The code for this is:

<button onclick="jQuery('#bgndVideo1').changeMovie({videoURL:'https://www.youtube.com/watch?v=V2rifmjZuKQ',ratio:'4/3'})">change movie</button>

1	<button onclick="jQuery('#bgndVideo1').changeMovie({videoURL:'https://www.youtube.com/watch?v=V2rifmjZuKQ',ratio:'4/3'})">change movie</button>

v. 2.8.0

see the demo read the doc

Also available as WordPress® component.

You can find the WordPress plugin here: http://wordpress.org/extend/plugins/wpmbytplayer/ The WordPress component is internationalized and it’s available in English, Italian and Spanish (thanks to Andrew Kurtis http://www.webhostinghub.com). below a short tutorial on how to install and configure it on your WordPress site.

What’s new in 2.8.0:

Feature: Reintroduced the “optimizeDisplay” option (default is true). If set to false the video will be played without any crop.

What’s new in 2.7.9:

Bug fix: When the player was instanced inside an iframe cross domain it was throwing an error.

What’s new in 2.7.8:

Feature: Added a new option, stopMovieOnBlur, to control the pause behavior when the window loose the focus.

What’s new in 2.7.7:

Fix: Something changed in the YT API that was preventing Firefox to get .getVideoLoadedFraction() at video load breaking the plug-in.

558 Responses

Joao Falcao February 27, 2015 at 4:05 pm · Reply →

Hello,
Is it possible to use YTPlayer with flex slider

Best regards
1. pupunzi February 27, 2015 at 7:40 pm ·
  
  Hi,
  probably with some javascript work it would be possible but I’ve never tried; sorry.
  Bye,
  Matteo
Jason February 15, 2015 at 3:23 pm · Reply →

Hey Matteo,

Thanks for the GREAT plugin.

Is there a way to limit the video to play on only a segment of the page?

If you look at (http://moderndreamfilms.com/) you’ll see that the video repeats again as
you scroll down the page. The bg video looks great on the first segment, but I don’t want it repeating farther down.

Is there a way to fix this?

Thanks,

Jason
BT February 13, 2015 at 10:24 pm · Reply →

Hi Pupunzi,

I like your web design and your Jquerry YT player. I will read a little bit more your documentation and try to install it on my Joomla site.

Do you think that it could be possible to find a solution to have on load an audio fade in (and why not fade in image too) ?

And is it possible with your JS to have the control bar of YT ?

Thanks

BT
Todd February 2, 2015 at 10:29 pm · Reply →

Having some trouble with getting the video to load seamlessly. It’ll load up a brief screen capture, then fade to black and then the loading animation before playing the video. Is there something I need to optimize with YouTube?

Thanks!
Brad January 30, 2015 at 1:27 pm · Reply →

Hi,

The optimizeDisplay feature does not toggle off. Setting the option to false does nothing, so you cannot turn it off for videos that get cropped too much. Looking inside the script, it appears it has been forgotten.

script last modified: 19/08/14 20.13

thanks
HappySun January 26, 2015 at 3:04 pm · Reply →

Dear Pupunzi,

I have the same problem with the YTPlayer. I uploaded my video to youtube.
In my HTML-built website the video is cut at the top and bottom now. I have tried it on different screen resolutions with the same result. I looks like a zoom-function for me. Why does this happen, can you help me please?

Further information: The youtube video measurements are HD, 1280×720. In my website the height is more important then the width. Consindering the width, it would be ok, if the height will scale down (without cutting) and there were a black border on the left and on the right side.
1. pupunzi January 26, 2015 at 8:52 pm ·
  
  Hi, this plug-in optimize the view to always fit the screen size (or the video container size); resizing the window the viewport of the video is calculated to never show black borders around it and take it always centered. This is the background behavior and can’t be modified.
  Bye,
  Matteo
sven January 13, 2015 at 10:15 pm · Reply →

hi. first of all: i love your script!
but..
the scaling is not working properly. i tried all browsers.
in fullscreen mode the video is too big, which means
that the video is cut at the sides and at top and bottom..
in “normal mode” it’s even more “zoomed in”. is there
any chance to get this fixed or do you know why it’s
behaving like this?
Thanks in advance –
have a nice time,
STEPHAN
1. pupunzi January 26, 2015 at 8:54 pm ·
  
  Hi,
  The size of the video is calculated to always fit the containment size without the display of black borders around. The priority is not to show the video at its size but to adapt it to the available space.
  Bye,
  Matteo
Rodrigo January 7, 2015 at 8:38 am · Reply →

It Works!!!
Thanks!!!!
Rodrigo January 5, 2015 at 9:32 am · Reply →

http://planetasonoro.es/test.html
Anyway im using your other plugin becase i need to insert video from other websites.
I try to do this plugin responsive ,Im near but no close at all
1. pupunzi January 6, 2015 at 3:40 pm ·
  
  Hi Rodrigo,
  The problem on your page is that you duplicate the ID of the video container; it should be unique.
  Try setting two different ID (video, video1) and it should work.
  
  Bye,
  Matteo