Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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

How To Embed YouTube Videos without the YouTube Logo-Hack

Now You Can Upload Photos to Youtube

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

    • NC for Hire

      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

  • 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.

  • NC for Hire

    so much to do..so little time..

  • NC for Hire

    oley but still some good tricks in here

  • NC for Hire

    Yes, some very good tricks here!

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Kathleen (SunKat) and Margarida Maria Madruga are now friends
Friday
Eva updated their profile
Friday
Eva and Margarida Maria Madruga are now friends
Friday
Nieve is now friends with Alex - Rosas † Negras and Margarida Maria Madruga
NC for Hire
Thursday
Vlada and Margarida Maria Madruga are now friends
Thursday
Margarida Maria Madruga is now a member of Ning Creators Social Network
Thursday
Joven commented on ψψ ⚜ LuciStG ⚜ψψ's blog post FREE SSL Certificates
"Agree"
Thursday
Garfield Archivist replied to ⚡JFarrow⌁'s discussion
Become a Youtube Master with These 4 Tricks
"Yes, some very good tricks here!"
Wednesday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Become a Youtube Master with These 4 Tricks
"oley but still some good tricks in here"
Tuesday
Joven replied to Garfield Archivist's discussion
For Creators & Admins: Automated Process for Removing Inactive Users
"Nice"
Tuesday
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
For Creators and Admins: Easy Way to Create a Community Status Report
"Thanks so much"
Jan 23
Garfield Archivist posted a discussion
The Problem:You have run a network for several years. You have a large network. When you review…
Jan 23
More…

Meanwhile, you can check our social media channels