Friday, 01 July 2016 01:29

How to insert video in your website

How to insert video in your website

Large background images have already become an integral part of any Web design. Video is an integral part of modern promotion and one of the most powerful tools of visual communication. Good to power up web pages with new elements, one of which is video or animated website background.

Many web owners wants to add some video to their site. If You have your great video that you want to share with all the world it is the best way to draw attention. Moreover, the usage of video background could add dynamics and ambience to the site and is a great opportunity to show off your skills and creativity. Websites designed with embedded video background looking more professionally.

This guide will show you how to add some video to your site as embedded part of your website page.

There are some very simple methods to embedding video into your web site, for example, you can use the following code:

<embed src="/video.mov" width="600" height="400" controller="true">

This method is best if your movie file is small and bandwidth and buffering times are not an issue.

If you're finding that your video takes a long time to load on your site, use videos hosted on another server (YouTube, Vimeo, whatever). It's fast, free and easy. Simply create an account, upload your video, wait for it to process, then copy and paste the provided embed code into your site. You most likely will use their embedding possibility rather than the HTML5 <video> Tag or a flash plugin hosted on your server. These embedding codes mostly use <iframe>, which is good since they detect all your needs on their site, like in "what format do you need", "use either HTML5 or Flash", or "streaming HD or lower definition for mobile phones".

Embed a player using an <iframe> tag

Define an <iframe> tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The <iframe> tag's height and width parameters specify the dimensions of the player.

If you create the <iframe> element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

https://www.youtube.com/embed/VIDEO_ID

The <iframe> tag below would load a 640x390px player that would play the YouTube video M7lc1UVf-VE. Since the URL sets the autoplay parameter to 1, the video would play automatically once the player has loaded.

<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  seamless="seamless"></iframe>

 

 

Embed a player using the IFrame Player API

Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.

The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

The problem with this is that anyone and everyone can also copy and paste your video into their site. Even You insert in Your video personal fragments, every may to edit it. If your goal is to create a web site with exclusive video content, then YouTube is not the answer. If you want to show exclusive or original video, you're probably either creating the video yourself, or you're getting it from another source, such as a public relations company.

If you're not rolling your own video, and you're getting it from another source, then most likely you're going to need to resize the video. Mainly, the video clips that received from public relations companies are sized 1280*720 or 1920*1080 pixels (HD Ready or FullHD video). For video of that size you couldn't show video controls or any portions of your own site. All that we need is a short snippet of code: scale, which can be set to "tofit" or "aspect" or a number. Aspect is you're best option, because it keeps the original ratio of the video in perspective.

<embed src="/sample.mov" width="640" height="360" scale="aspect" controller="true">

Note: IFrame embeds can load either the HTML5 player or the AS3 player. Though some parameters are not supported in both players, an IFrame embed that loads the AS3 player will support all parameters that work with that player and ignore all other parameters. Similarly, an IFrame embed that loads the HTML5 player will support all parameters that work with that player while ignoring all other parameters. For example, the HTML5 player does not currently support the playerapiid parameter, but you can still specify that parameter when creating an IFrame embed. If the embed loads the AS3 player, the player will support the parameter, and if the embed loads the HTML5 player, the player will ignore it.

If you don't use the scale code, and simply use width and height, then you will crop the video. Also, you will not see the controller for play, pause, volume, etc. Plus, you need to add an extra 16 pixels to the height of the video to see the controller. For example, if the video is sized 1280 x 720 and you set the width to 600 and the height to 400, then a significant portion of the video will be cropped and not seen by the visitor; you also don't get the controls. Using scale removes the necessity of adding 16 pixels, it does not crop the video and you get the controls.

A 50MB video at this width and height will load fairly quickly with minimal buffering; even though there might be a slight wait involved, most visitors will sit there for several seconds if they truly want to see the video and they see the slider bar is increasing rapidly. But this method not the best for inserting in the main page of website. Visitors want to see a new website in 2-4 seconds, 6-8 maximum.

If you use a web host service, and you get a large spike in traffic because of the popularity of a given video, you might note that will have an additional expenses due to significant amounts of resources being used. If your website not personal hobbey and You want to join the professionals, this will become an eventual reality.

Another potential issue, is that certain parts of your web page might not load, or become functional, until after the video is fully loaded. For example, I have a rotating series of images that did not load and display until after the video finished loading. Also, I could not use my "Share This" social networking buttons until after the video finished loading. These problems occurred in Firefox and Internet Explorer, but Chrome did not exhibit these issues.

For a professional web site, these types of loading problems are not acceptable.

At this point you might be feeling a little stuck. You have this great, unique, exclusive video that you want to share with the world, but you want them to view it on your site and not a hosting site. At the same time, you're not at the point where you have the servers and the bandwidth to support 15-minute long videos without your audience having to wait 10 minutes or more for the video to buffer. Plus, you don't want your web host company to charge exorbitant amounts because your great video content clogged up the tubes.

Fortunately, there are answers to this problem. One solution comes in the form of Amazon Web Services. Signing up is free and the cost to use their services are counted in pennies per GB. You only pay for the services you use as you use them. There are no monthly fees or subscriptions.

Amazon Web Services does not provide a step-by-step tutorial. However, there are plenty of help files and information spread around the site. For the purposes of uploading video, you need to use Amazon CloudFront in conjunction with an Amazon S3 bucket. From the Amazon CloudFront page:

To use Amazon CloudFront, you:

  • Store the original versions of your files in an Amazon S3 bucket.
  • Create a distribution to register that bucket with Amazon CloudFront through a simple API call.
  • Use your distribution's domain name in your web pages, media player, or application. When end users request an object using this domain name, they are automatically routed to the nearest edge location for high performance delivery of your content.
  • Pay only for the data transfer and requests that you actually use.

Just one another note. To place video in . The standard embedding code I get from vimeo looks something like this:

<iframe src="http://player.vimeo.com/video/61337126"
  width="550" height="281" frameborder="0">
<iframe>

Well, the way to achieve resizing according to viewport/content width is by simply adding some CSS for your iframe:

iframe {
  width: 100%;
}

And the iframe is as wide as the container you put him in. However, the height can't be controlled that easily. To preserve that aspect ratio, you need a wrapper div, let's call it .aspect-ratio:

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
}

This div is as wide as the content/viewport area, the height is zero. So practically this shouldn't be visible. However. The padding of this one is the height of the video divided through its width, or in other words: the aspect ratio in percent! No matter how much you resize your window, it will always stay in this ratio. So, all you need now is to let the iframe inside flow to each corner of its parent:

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

Since the parent element has no height, we place it absolutely on the top left corner and let the iframe use the space created by the padding.

Published in Web Design
Thursday, 01 September 2016 00:54

Top Most Popular Video Websites

Top 15 Most Popular Video Websites September 2016

Here are the top 15 Most Popular Video Sites as derived from our rank which is updated average of each website's

Traffic Rank from Compete and Quantcast,Alexa Global Traffic Rank.

You Tube1 YouTube - 1,000,000,000 Unique Visitors4 - Compete Rank, 2 - Quantcast Rank, 3 - Alexa Rank

NetFLix2 NetFlix - 150,000,000 Unique Visitors24 - Compete Rank, 166 - Quantcast Rank, 95 - Alexa Rank

Vimeo3 Vimeo - 130,000,000 Unique Visitors148 - Compete Rank, 44 - Quantcast Rank, 98 - Alexa Rank

Yahoo! Screen4 Yahoo! Screen - 125,000,000 Unique Visitors*105* - Compete Rank, *110* - Quantcast Rank, N/A - Alexa Rank

Daily Motion5 DailyMotion - 100,000,000 Unique Visitors156 - Compete Rank, *NA* - Quantcast Rank, 94 - Alexa Rank

Hulu6 Hulu - 75,000,000 Unique Visitors136 - Compete Rank, 179 - Quantcast Rank, 306 - Alexa Rank

Vube7 Vube - 55,000,000 Unique Visitors117 - Compete Rank, *860* - Quantcast Rank, 65 - Alexa Rank

Twitch8 Twitch - 50,000,000 Unique Visitors710 - Compete Rank, 295 - Quantcast Rank, 266 - Alexa Rank

Live Leak9 LiveLeak - 45,000,000 Unique Visitors537 - Compete Rank, 235 - Quantcast Rank, 642 - Alexa Rank

Vine10 Vine - 42,000,000 Unique Visitors237 - Compete Rank, 335 - Quantcast Rank, 1,172 - Alexa Rank

Ustream11 UStream - 25,000,000 Unique Visitors1,109 - Compete Rank, *85* - Quantcast Rank, 854 - Alexa Rank

Break12 Break - 14,000,000 Unique Visitors1,104 - Compete Rank, 60 - Quantcast Rank, 1,489 - Alexa Rank

TV13 TV - 13,000,000 Unique Visitors124 - Compete Rank, 787 - Quantcast Rank, 1,749 - Alexa Rank

Meta Cafe14 MetaCafe - 12,500,000 Unique Visitors1,028 - Compete Rank, 461 - Quantcast Rank, 1,477 - Alexa Rank

Viewster15 Viewster - 12,000,000 Unique Visitors150 - Compete Rank, 300 - Quantcast Rank, 3,779 - Alexa Rank

Published in Website SEO

Video Search Engine Optimization (Video SEO)

Many years ago mankind going to save informations for future ages. Legacy of our age is quality video that accuracy shows how doing many things. Better may be straight impact in the human brain... But simply creating a movie file is not enough. There are more elements to a video that determine its marketing success than simply having a video on your YouTube channel. Why YouTube? YouTube is one of the largest search engines in the world, alongside Google. As of March 2015, creators filming in YouTube Spaces have produced over 10,000 videos which have generated over 1 billion views and 70+ million hours of watchtime. Both YouTube and Google display videos depending on the keyword being searched. Their algorithms use the data you give them to determine if your video is relevant to the searcher.

Video Search Engine Optimization (Video SEO) is the process of adding metadata to your website so that a search engine can better read what's on your page. The video's metadata will tell search engines things like:

  • Video title
  • Video description
  • Length of the video
  • Video transcript

Webmaster includes this metadata in your website to optimize your site for search engine indexing. The goal of Video SEO is to drive more traffic to your website. Optimizing your video content for search engines means that your pages will show up in video-specific search results, thus driving more traffic to your site. Using recommended markup makes it easier for YouTube and Google to discover and index your content.

Here are some tips on how you can maximize the Video SEO impact on your video.

Managing Your Metadata

Make sure you update the title and descriptions properly for all of your videos uploaded.

1. The Title matters. The title of your video is a strong ranking factor in YouTube and Google’s search algorithm. Using your main keyword in the title increases the video’s chance of ranking higher for the keyword you are targeting. The title should be relevant for the video. Make sure it's short and sweet. Don't try too hard to make it wordy, or shove too many keywords into it. Just focus on appropriately naming the video for a viewer's experience.

  • Describe exactly what the video is about in 70 characters or less and all words is well ranked for search engines
  • Write your video title for driving clicks as well as organic search
  • Use your brand name in your title if possible

2. The description of your video is a longer version of your title. This is where you can go into more detail about your video and include links that will drive traffic to your website or other channels. It should be informative, creative, and compelling while also including the relevant keywords you couldn’t fit into your video title. e as descriptive as possible, but again don't go overboard with keywords. Make the description useful for viewers, not for bots.

  • Leave a link near the top of your video description
  • Share your social networks, important links and other relevant information
  • Write a maximum of 800 words

3. Annotations are the little pop up boxes that help drive additional engagement within your channel or website. They also allow you to explain something in further detail.

  • Link to related videos that the viewers might be interested in viewing
  • Use annotations to help drive clicks to your website
  • Use annotations to encourage subscriptions, likes or comments

4. Transcribe your video for Google and other search engines. Your potential client may to use Webcrawler or exotical search engine that likes to him many years. Only you can leverage that information to help your video get indexed with optimal context.

  • Use keywords in your video content for Google to crawl
  • Manually transcribe your video as accurately as possible
  • Use your transcription and video in a standalone blog post

5. Share your video by many ways.

Inbound links are what powers SEO in the traditional sense. The more links there are pointing to your page or video, the higher it ranks in Google’s search. This makes sharing your video a great strategy to improving your video’s visibility in Google.

  • Embed your video to resources whenever it is relevant
  • Promote your video on social media channels
  • Ask websites within your niche to share mutual links

6. Check and re-optimize your video after indexing. Make sure you have related content on your page so that search engines have context surrounding the video. If you notice an increase in traffic from specific searches, add more content for those visitors. Choose a thumbnail that looks attractive for the topic at hand. Use the Google Video extension to the Sitemap protocol to give Google information about video content on your site.

Thumbnail video

  • thumbnail of your video is impulse to click for view the video (see the picture above, where all thumbnails looking different)
  • add related content to your video page
  • check your video to verify that Google Structured Data Testing Tool see your video and it's metadata
  • create a new video Sitemap or add video information to an existing Sitemap.
Published in Website SEO