How to insert video in your website

Written by
(0 votes)

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.

Александр

Hello, I create websites many years. Hope I will help other people with my experience for your personal or company website. If you have goods or service, you will find your new customers on the web.

www.zaderzhki.net
Login to post comments