6 Tricks towards Becoming Youtube Master

Post date: Aug 25, 2014 5:40:53 PM

On Becoming a Youtube Master

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

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:

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.

6) Embed a Youtube Playlist Into Ning Network Videos Section

I've seen quite a few questions on how to effectively embed an entire Youtube video playlist into the videos embed section of your Ning Network. Here is how to do it and proof of concept here. It requires a simple hack to the code.

This is the code you need to embed a playlist:

Notice the ID above. Now let's suppose you want to embed a playlist found at this url on Youtube:

http://www.youtube.com/watch?v=BapoW7wY0yc&feature=rellist&playnext=1&list=PL9117A16250D3CF7B

Simply take the list id found after list= in this case PL9117A16250D3CF7B

You may need to make adjustments to the width and height BEFORE you embed the code into the site. Percentages like 100% will NOT work so use pixel measurements.

It's not perfect but it works and if anyone else has ideas on how to make it better, please feel free to sound off below.

And as always, If you happen to be in search of freelance development or expertise, i can be hired.

More Youtube and Video Hacks Tricks on My Creators Profile

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

Note: This is a Google Site so embedded videos act differently than on Ning networks due to Gadget Limitations.

compared to this:

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.

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.

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.

src="http://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.

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

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.

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.

5) Embed YouTube Videos without the YouTube Logo-Hack

Embedding Youtube videos on your ning network is a terrific way to curate content which pertains to your site's subject matter. But one problem that can arise will actually drive traffic back away from your network and that is when a member (or non-member) clicks ont he Youtube logo within a video which takes the visitor back to that video on Youtube. Here is a hack that will remove the Youtube logo from the embed.

The following post contains two videos that are embedded straight from YouTube. They are essentially the same videos except that one of the embedded video players does not not carry any YouTube-specific branding. Take a look:

This video player has a YouTube logo in the control bar (bottom right)..

.. while the player embedded below carries no such logo.

Removing the YouTube Logo from the Video Player

If you would like to remove the logo from the YouTube player before embedding it on to your website, you need to make a minor change to the default embed code as outlined below.

For the IFRAME version:

src="http://www.youtube.com/embed/abc?modestbranding=1"

frameborder="0" allowfullscreen>

</iframe>

For the old OBJECT version:

value="http://www.youtube.com/v/abc?version=3&rel=0&modestbranding=1">

</param><param name="allowFullScreen" value="true"></param>

src="http://www.youtube.com/v/abc?version=3&rel=0&modestbranding=1"

allowscriptaccess="always" allowfullscreen="true">

</embed>

</object>

Use the default embed code for a YouTube video and just add modestbranding=1 at the end of the video URL and the YouTube logo won’t show up in the Flash Player.

The new “modestbranding” parameter for YouTube is supported for both Flash-based and IFRAME based embed codes (that are HTML5 compatible).

Update: The previous version of this article used the “showinfo=0″ parameter with “modestbranding=1″ but for the video player to be completely logoless, the showinfo parameter needs to removed. Brian Glick from the YouTube team shares why:

The reason why the video “YouTube” logo overlay appears is because the modestbranding option normally, by itself, still shows some branding – in the form of a small “YouTube” text overlay in the upper-right corner of the video, when you hover over it while the video’s paused. But since you explicitly asked for showinfo=0, we have no place to show the “YouTube” text overlay. So the alternative is to communicate that it’s a YouTube video player via the video overlay.

Thanks to buddy Amit on Labnol for this awesome and useful tip!