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
my first guess is that it will only work for single videos...may require more modifications to use an entire playlist... if you look through my past discussions you'll find one for embedding playlists..perhaps a combination and a bit of trial and error you'll get it working..
let us know
fantastic breakdown JFarrow. Especially liked the subscribe in one click titbit
thanks Ed..glad you found it useful!
nice now question using the 1st tip replacing the iframe with a div for faster load
i use custom embed codes to hide controls related vids loop hide the youtube top bar etc as seen ww3.dreadlockssite.com
if i was to use the div as n alternate way ifs there a way to use the same controls for the same look
and
will it be responsive if wrapped in a wrapper div with 100% width or something
I see nothing between line "compared to this:" and line "When the user hits the play button..."
It's the same with Firefox and IE.
apparently ning strips that..
so much to do..so little time..
oley but still some good tricks in here
Yes, some very good tricks here!