In the past, I have shown you some interesting tricks for embedding youtube videos into your site. For example, How to Embed without Youtube Logo and how to embed playlists (more at bottom of the post). Today I am going to show you 4 new tricks for becoming a Youtube Master on your Ning network.
1) A Better Way to Embed Youtube Videos
When you embed any YouTube video on a website using standard IFRAME tags, you’ll be surprised to know how many extra pounds that video adds to your page.
Image from Amit of Labnol
The web page has to download additional ~400 kB of resources (CSS, JavaSript and Image files) for rendering the video player alone and these extra resources will download even if the site visitor has chosen not to watch the embedded YouTube video.
This can be a problem for two reasons. Once, we are indirectly adding extra weight (nearly 0.4 MB) to our pages and second, the visitor’s browser has to make multiple HTTP requests to render the video player.
Neat Solution: Load the YouTube Video Player On-Demand
Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can easily incorporate that approach on our sites as well.
Instead of embedding the full Youtube video player, Google+ only displays the thumbnail of a YouTube video and then overlays a play icon over the video so the image resembles a video player. Take a look at this sample video embedded below (or on Google Plus).
compared to this:
When the user hits the play button, the image thumbnail gets replaced with the standard video player. Thus, the extra player-specific resources are loaded only when the user has decided to play the embedded video and not otherwise.
Code: Embed YouTube Videos without Increasing Load Time
The regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique YouTube ID of the video.
<iframe width="320" height="180"
src="https://www.youtube.com/embed/SFWi_iEKb-A">
</iframe>
And here’s the corresponding on-demand code for YouTube. You have to replace the height, width and the Youtube ID in the code above and then copy-paste it anywhere in your web template.
<div class="youtube" id="SFWi_iEKb-A" style="width: 320px; height: 180px;"></div>
<script src="https://labnol.googlecode.com/files/youtube.js"></script>
2)Add a Subscribe Button for Your Youtube Channel
Do you have a video channel on YouTube? Then you may want to add this simple “Subscribe” button to your website that will help visitors subscribe to your YouTube channel with a click without having to leave your site for YouTube.
For example, here’s a “live” subscription button for my video channel on YouTube:
To embed this button to your own website, just copy-paste the following block of HTML code anywhere in your website. Then replace XYX in the subscription URL with your own YouTube username.
<iframe src="https://www.youtube.com/subscribe_widget?p=XYZ"
style="overflow: hidden; height: 105px; width: 300px; border: 0;"
scrolling="no" frameBorder="0">
</iframe>
Subscribe to Channel with a Single Click!
When you create a link from the website to your YouTube channel, there’s a probability that that visitor may fail to notice the “subscribe” button on the already crowded YouTube channel page.
However, if you add “sub_confirmation=1″ to the YouTube channel link, the visitor will get a prompt to subscribe to your channel while they are on the YouTube website. Click here for a live example.
3) Add Your Own Logo to Youtube Videos
You can use any video editing software to add logos or watermarks to your videos before uploading them to YouTube but how do you put them in your existing videos that are already on the web?
Well, YouTube has recently added a new feature called InVideo Programming that will help you add any custom image to all your Youtube videos with a few clicks without having to edit the original video.
You can choose to display the logo at the start of the video, somewhere in the middle or even for the entire duration of the video. Also, the logo can be placed in either corners of the YouTube player.
NOTE: YouTube internally uses annotations to display the images over the video and thus, if you a YouTube viewer has turned off annotations, your logo won’t be visible.
4) Use Any Youtube Video as a Background for your Ning Site Pages
You are probably using a single static image as the background for your Ning site but it may offer a slightly more richer experience if you could consider placing moving images, like an animation or a self-playing video clip, in the background of your web pages.
The Bing homepage, for example, frequently uses video backgrounds, like those penguins jumping out of an ice hole one after another, and so can you on your own website.
There are several approaches here:
- Bing uses the standard HTML5 <video> tags to serve videos on the homepage. The embedded video has a fixed size and it doesn’t resize itself with the browser.
- There are ready-to-use jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, as page backgrounds.
- The other more simple approach, as you can see in this demo, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background.
YouTube Video Backgrounds
To get started, simply paste the code below near the opening <body> tag of your web template. You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background.
<div style="xg-p: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Replace ID with the actual ID of your YouTube video
Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page.
The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript.
Thanks to Amit for great tips and tricks!
Other Youtube Tips and Tricks:
URL Tricks for Embedding Youtube Videos
How To Embed a Youtube Playlist Into Ning Network Videos Section
Videos TIP: Build Your Video Library with Video Alerts
Hack To Embed Facebook Videos Into Your Ning
Do More with Your Video Embed Option...and Smile.
Hack for Using Videos to Drive Group Involvement
Replies
We were just discussing (in Chat) creating our own channel(s) on Friday. Really got me thinking. Thank you for all the ideas and resource links. Greatly appreciated.
I'm reading your mind Kos...
LOL well I'm certain it's more the other way around but it's still funny. My guys are not to "into" videos BUT I was demonstrating to them how easy it is to add a youtube or Vimeo channel on a 3.0 page and before you knew it, they got all excited. Now these are "stock traders" mind you - not artists by any stretch of the imagination. They decided that maybe *they* could begin to record their own videos on stock market conditions and trades, and create a youtube stream on the new site. One guy went so far as to record 2 videos yesterday (but then deleted them). It was pretty funny.
Then the convo took a turn and they were asking about embedding music players on a page. These are people who never even used their My Page.......and suddenly they want a music player? *lol* How unfortunate there's no text box on member pages in 3.0 because now they're going to want ME to build a page. *augh* Not real thrilled about that prospect. Something I'll have to ponder further down the road as 3.0 nears completion.
Still all these new changes in 3.0 are twisting my (and now my members) brains! LOL I wonder if the new 3.0 sites will even resemble our 2.0 sites in a year or two.
Example 2 seems to be loading weird in Chrome...so skip that one if you believe it will not be of use to you.
Wow you guys are on a another level it's like you take peoples wishis and make it a reality love the work and time you guys are taking out to help those in need the tips are on point glad we crossed paths much love and respect..
thanks for that..I try...
hope you get some use of these tips buddy..
This is off topic but is there a way to have your comments that are shared to fb and or twitter double back when people post on those networks to show up on your activity feed and or the post itself on your own site? I think that would be very helpful?
I believe you would need to go to your Facebook account and "build an app" for that - then imbed on your site. Maybe someone knows of another way and will chime in.
well if i understand what you are asking you can simply take the feed from your facebook page and import it back into your site into a RSS module..
I like the idea of having the video set up so it wont kill the load time. But I have been having trouble using the code question does this code only work on single videos? I'm trying to use it on a playlist basically our top ten videos and thought maybe it doesn't work on playlist? also with the code for the no youtube logo on players embedded into the site.
this is the code i'm using from your code given
<div class="youtube" id="PLF73955473D3D471D" style="width: 320px; height: 180px;"></div>
<script src="https://labnol.googlecode.com/files/youtube.js"></script>
this is the original code for the playlist that i'm trying to implement
<iframe width="475" height="267" src="https://www.youtube.com/embed/videoseries?list=PLF73955473D3D471D" frameborder="0" allowfullscreen></iframe>
should I be putting the whole thing after embed instead of just the numbers? the website i'm you can see it on is http://unsignedblast.ning.com/
-
1
-
2
of 2 Next