How to use a Yotube movie as background of your HTML page
One of the latest component I’m working on is an easy to build custom Youtube player.
The new Youtube API allow developers to invoke a chrome-less AS3 player and use a javascript API to build our own controls, we have almost all the controls available: player.playVideo(), player.pauseVideo(), player.setVolume(), player.mute(), player.unMute(), player.getVideoStartBytes(), player.getVideoBytesTotal(), player.getVideoBytesLoaded(), player.getCurrentTime(), player.getDuration() … All we need to make a custom and customizable control tool for our movie player.
Going on developing it, a great idea was growing in me… Why not using any movie from Youtube as background of a website page instead of images…
I sow a site (from http://jquery14.com) that uses a movie as background with a really nice effect (http://insideccs.com/#/before_getting_in/degree/). This is what I was thinking at.
And how to have this movieplayer as background?
Well, of course we can’t set it via CSS; this is not supported. But we can have a DIV with an absolute position containing our embedded chrome-less player under all the other elements of the body; the EMBED must have the WMODE property set as TRANSPARENT to prevent the movie to be over the rest of the content and it must have WIDTH and HEIGHT set to “100%”.
And this is what my jquery.mb.YTPlayer plug-in can do for you; what you have to do is just insert a line of HTML code into your page, include the js in the head of your page and call the method. All the rest is the plug-in:
In the head:
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.metadata.js"></script> <script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>
In the body:
<a href="[the youtube video URL]" class="movie {opacity:.4, isBgndMovie:{width:'1990',mute:false}, ratio:'4/3'}"> [Alternative link] </a>
And the js call:
<script type="text/javascript"> $(function(){$(".movie").mb_YTPlayer();}); </script>
The plug-in can also be used as alternative Youtube player just removing the isBgndMovie meta parameter; in that case you can specify the width, the aspect ratio (4/3 or 16/9) and you can customize the controls via CSS.
The advantage you whould have is also that the embed of the player is provided with all the browsers support controls using the swfobject.js.
Take a look at this video:
[youtube=http://www.youtube.com/watch?v=j47NH-tGl2A]
Ciao Cri,
Su iPad potrebbe funzionare ma ci sono comunque delle limitazioni non trascurabili; iOs e i device in generale non permettono l’autoplay di file multimediali come video e audio per una questione di sicurezza; inoltre YT su device ha disabilitato i controlli javascript impedendo così l’utilizzo di un componente come questo. Vedremo in futuro se le cose diventeranno più semplici.
Ciao,
Matteo
Ciao Matteo complimenti per il plugin!!! Solo una domanda: su iPad non funziona, com’è possibile risolvere il problema? Grazie mille
Hi Korr,
It doesn’t work locally just for a Flash player restriction (it can work if you allow flash player to get external content authorizing the local path).
Try it on a web server… it works great except for Safari PC (don’t know why jet).
Bye,
M
This doesn’t work at all…
What am I doing wrong, the demo neither by the way, tsssss…..aren’t there any better alternatives??
That’s a really interesting plugin. Unfortunately youtube doesn’t work in my office pc. 🙁 But I have used a plugin called “tubular” which sets the youtube video as background of the page.
http://jquerybyexample.blogspot.com/2011/12/set-youtube-video-as-background-using.html
I don’t know how different is your plugin from tubular plugin. I will go and check it once I reach at home.
If you download the latest gitHub commit you’ll find great new features included player event trigger:
https://github.com/pupunzi/jquery.mb.YTPlayer/zipball/master
Bye,
Matteo
Hi! is there a way to make the page to redirect after the video is finished?? Thanks a lot, great script, really helped me in my project.
Ciao matteo volevo farti i complimenti per il meraviglioso plug-in. Volevo inoltre chiedere se c’è un modo per far si che il filmato si adatti perfettamente alla finestra senza lasciare bordi o bande nere quando viene ridimensionato.
Grazie in anticipo!
[…] How to use a Yotube movie as background of your HTML page … […]
hey okay 😉 *.html
{opacity:.4, isBgndMovie:{width:’1990′,mute:false}, ratio:’4/3′}”> [Alternative link]
why not no sound? please help me. please.
Hi Kevin,
The Youtube chromeless API doesn’t seams to support the modestbranding modality. I’m sorry.
Anyway, if you whant to hide the YT logotype you could set the player width higher than the container one so the movie will be cutted a little bit on the bottom: “isBgndMovie:{width:1000,…},…”.
Bye,
Matteo
I am trying to do the same thing as Juani without any luck. Is there any way to remove the youtube logo by using modestbranding=1 ?
Thanks in advance, BTW, awesome website 🙂
Hi there!
Congrats for the job! the player is awesome!
I have a question…
How can i use ?modestbranding=1 to disable youtube logo with the player?
If i need to write the adress like this:
http://www.youtube.com/embed/6_W_xLWtNa0?modestbranding=1
but with embed the player doesnt work, or i doing something wrong?
Some help here
Thanks a lot!!!
Ciao Alberto,
Se scrichi l’ultimo update da gitHub troverai quello che cerchi.
https://github.com/pupunzi/jquery.mb.YTPlayer/zipball/master
Ciao,
Matteo
Ciao Matteo, sono riuscito a risolvere, grazie mille per l’aiuto e soprattutto per condividere questo fantastico plug-in.
Penso che non ci sia ancora la possibilità, ma si potrebbe mettere una playlist di video?
Ciao Matteo,
ho provato ad inserire la stringa di codice che mi hai passato (ho anche corretto indez con x 🙂 , purtropo le immagini non vanno in primo piano e continuono ad essere in trasparenza sul video e se invece provo a mettere a pieno l’opacità del video in background scompare tutto il resto…
hai qualche altro suggerimento
grazie
Alberto
Awesome. I found this after seeing it implemented as a plugin for the concrete5 cms. Thanks to you I don’t have to rip it out of their html! This is going on my video game website to bring the power of Wii to every page!
Ciao Alberto,
prova aggiungento al TAG body questo style:
style=”position:relative, z-indez:2″
dovrebbe risolvere il tuo problema.
Ciao,
Matteo
Ciao Matteo,
come tutti ti faccio i complimenti, grazie mille trovo fantastico il tuo plug in, Io purtroppo non mastico molto l’html e nel mio sito ho sempre fatto copia in colla di script…ti volevo chiedere se c’è una maniera che il comnado di opacità non affetti l’opacità dei contenuti che sono sopra al background video…
grazie
Alberto
It works fine now. Thanks for the quick reply.
Really appreciate it.
Hi Ramon,
Try adding this style to the BODY tag: position:relative, z-index:1.
The component should have done it but it doesn’t on your page, don’t know why…
Bye,
Matteo
Hi matteo,
Fantasic job! i’ve got a quesiton, why is it that my that my content is shown in the background?
I just took your script and changed the content and link. Even if I upload your code the content is still shown in the backgound, could you tell me what I did wrong?
Fantastic work here. Is there a way to get control functionality whilst having the video autoplay? I’ve tried removing the isBgndMovie variable and added the standard &autoplay=1 to the link but it doesn’t work…?
Thanks
figured that out…just the aspect-ratio is still kinda confusing….as te guy above stated i cant figure out how to fullscreen the thing 100%…
any suggestion please??
thanks dude!!
Hi Matteo,
first of all thanks a lot for your work….i love it….i am just trying to figure out where to adjust the volume, so i can still hear some sound of my embedded video…..can you gimme some assistence in that matter please?? your help is heavily appreciated!!
thank you very much
cheeba
hi mateo! how can i make this fullscreen and without the youtube link/logo at the bottom right? thanks.
Hi,
You should test your javascript inclusion paths and see on the console wat errors you get…
Bye,
Matteo
Can I do this in iWeb?? I’m trying and it doesn’t work
please help
@Luigi > you just have to apply in such a CSS z-index: 5000
Hey,
Really cool plugin. I can do wonders with this….
Now, I don’t know much about coding but I get around it…. Is there a reason why the video is always displaying on top of all my content instead of the background?
What am I missing?
http://www.luigicix.com/2010
can someone fix this script so it also works with IE …. i’m currently developing a website and it works fine with Chrome and Firefox but does not work at all with IE 8 … thank you
Hi Ashan,
the YT chromeless player is thought to let you totally customize the apparence and functionalities, so I don’t think there’s such an option because you can make it yourself via javascript API.
If you take a lok at my code you can see that I get access to the state events given by the YT API (playerState function) once the player ends the state is set to 0 and you can start it again…
Bye,
Matteo
ha ha sorry the answer is above me ….. hiks !!!
Anyway , Is there anyway to loop the chrome less player without adding any javascript code , I mean can’t you add the “loop=1” (*like the embedded player) to embed code … (* I wonder …)?
eg:
hey nice script you coded there … , got to know about the script today .
I just getting started with this . today I gone through the youtube API , got to know al ot about the api .
when i looking your code I noticed the chrome less player embedding code (http://bit.ly/hoXCNt) . but after looking for infinite loop code for chrome less player I got stucked . I’m new to this web designing .. & trying to do something special for my degree this year project,
so if you kind enough , can you just tell me the exact code for chrome less player infinite loop in the script.
Hi Esther,
Yes, I know, in FF for Windows it seams that the YT embedded player for large videos takes a lot of CPU usage making everything slow… Don’t know what’s the problem and I hope it’ll be solved with their next release.
For Vimeo implementation the problem is that they doesn’t expose an API for a chrome less player as YT does, so it’s impossible at the time to have the same behavior for videos coming from Vimeo… Hope they’ll implement it in the future.
For the Loop matter, what you are asking for is to stop the background movie once it get the end?
if you see the jquery.mb.YTplayer.js file, at the end (line 299) you can find:
if (state==0 && data.isBgndMovie) {
player.playVideo();
}
just comment those lines to stop it.
Or add some code inside the statement to show a black screen over the movie if you want.
Bye,
Matteo
Okay, few things.
1 — I absolutely love this player…and many of your other works on your website. You bring new meaning to the word “interface” for web pages.
2 — Issues
On my Mac, this player works fine for me in Safari and Firefox…(and I can’t remember if i tested it in Opera…or not…)
However, on my roommates laptop, it seems to work fine in Internet Explorer, but I can’t seem to get it to work properly in Firefox. She is on a Windows computer…so it might have something to do with that…because it works fine in Firefox on my Mac.
I tested the player at my work computer as well (which is Windows and runs Chrome). It worked fine.
3 — Features I’d -REALLY- like to see.
I’m a huge fan of Vimeo…so having it be compatible with Vimeo videos would be fantastic!
I also think this video player would actually be good for splash pages, the only problem is right now it loops forever. Having a loop control variable would be very nice….if the YouTube display at the end of videos is what you are worried about (for aesthetic reasons, I would not blame you.) Perhaps, there is a work around to display some kind of black screen when the video finishes?? I dunno really how you would go about to program it…but having loop control would REALLY BE NICE.
That’s all. Keep up your fantastic work!
pleas y want up….some videos how can i dp this……learme.. 😛
what is broken?
am I missing something?
Is there any reason as to why this would be broken? Am I missing something
moncler clothing
moncler sale
How did you make it work on Firefox and Safari?
Great stuff. I just tested it out on my own server, with one of my own youtube videos and works great in Firefox, Safari and Chrome. I was convinced that the only way to do this was with flash. Can’t wait to develop a new site with this resource.
Thanks!!!
Interesting stuff, but the sidebar don’t display properly on my Mac…maybe you could take a look. Thanks, anyway.
cool…really!
What a great resource!
Your demo doesn’t work for me in Firefox. I’m not getting any errors but i can see in the NET that its not trying to load the video from youtube. I tried it in chrome and it works fine. hmm….
Hi Sean,
do you get some error in console? (use firebug to test for some errors)
I’ve no problems running the demo either locally or on the server…
Here is a test page on my server: http://pupunzi.com/test/mb.YTPlayer/demo.html
Let me know if it works for you.
Bye,
Matteo
When I download the demo it seems to not work properly. I have tried to run the demo.html file locally and on a server but i dont get any video. Is there any reason as to why this would be broken? Am I missing something?
this is *really* exciting – i can’t wait to have a play with it. what a great idea for a plugin.
i can see this becoming huge!