Then click Add Videos. On the Add Video to Playlist page, click the Your YouTube Videos tab and select the videos you want to add to your playlist. When you’re finished, click Add Videos. Tip: In your analytics, find the videos that best convert subscribers and include those in the playlist for new viewers. Advertisements can be displayed on YouTube videos in a number of ways. You can create and manage your YouTube ad through the Google Ads platform. Here, you will assign your ad to be a six second bumper ad that appears at the beginning of a video, an in-stream ad which can be skipped after 5 seconds, or any of the other ad formats listed below. Add any video from YouTube to your Weebly website. Grow audience engagement and site’s conversion with YouTube videos. Earn even more with AdSense Support. Open the YouTube website on your computer and hover over a video thumbnail. Here, click on the “Add to Queue” button. This will instantly bring up a mini-player in the bottom-right corner of the screen. This is your queue. You can click on the “Play” button to start playing the video. But a queue with just one video isn’t much of a queue. This is one of our favourite tools for creating all sorts of quizzes. It also has a feature that supports integrating videos in your forms. Click on the 'add video' button in the floating bar on the right hand side and paste the URL of your YouTube video or type in a query to search for a video.

This guide deals with how you can insert a video into your web pages using HTML, or to be specific, using thefacilities provided by HTML5.

Preamble: Other Alternatives to Writing Your Own Code

Before we delve into the HTML, you should be aware that there are other ways you can add a video to your site.

• Using a Video Sharing Site

  Instead of hosting the video file directly onyour website, you can alsoupload it to a video sharingsite like YouTube, get the embed code (the HTML code) for that video, and insert it into your web page. If this is whatyou actually want, I have numerous tutorialson doing it using various web editors, includingExpression Web,BlueGriffon,Dreamweaver and others.

  The advantage of doing things this way is that you don't have to foot the bill for the bandwidth for that video. Sincevideos consume a lotof your website's data traffic allotment, it is a significant factor in its favour ('favor' if you usea different variantof English).

  The disadvantage is that the video is now hosted on another platform that is mostly outside your control.Depending on which sharing site you use, they may put advertisements on the video, impose limitations onit (eg, on its length or file size), and so on. And of course, the video is also then available on another site,rather than being only on yours. Whether these disadvantages are significant depends on yourvideo and your purpose for it.

• Using a Third-Party Video Player Script

  Another alternative to writing your own HTML is to use one of the manyfree video playerscripts available on the Internet.

  The advantage of using these third party scripts is that some of them can play a video using Flash should yourvisitor use an old browser that does not have the built-in HTML5 video-playing capability. This includesInternet Explorer 8 and earlier. That said, I don't think there are many people still using such old browsers,but you will have to check your own site statistics to be sure, since your demographics may be different from mine.And remember that Adobe will stop issuing new versions of Flash by the end of 2020, so the benefit may not beas great as you think.

  The disadvantage is that most of these scripts are actually JavaScript-driven. This means that if you visitor has disabledJavaScript in his/her browser, your video may not play at all.

If the above alternatives do not suit your needs, read on.

HTML5 Required

Note that this tutorial deals with the HTML5 code for inserting a video. This meansthat your page has to be in HTML5. If it is in some other version, like XHTML 1.0 or HTML 4.01, change theDOCTYPE or DTDto '<!DOCTYPE HTML>' and adjust the code on the rest of the page, if necessary, to conform tothe HTML5 specifications. One easy way to speed up the process of locating the HTML that needs to be modified is tovalidate the HTML. That is,run your page through one of freeHTML validators around. It will choke on the HTML features that are no longer supported, and point them out to you.This saves time since you don't have to go through the page line-by-line.

And, as you have probably already surmised from the paragraph above, I will also assume that you know some HTML,or at the very least, know how to insert such code into your web page without messing up the rest of the page. Ifthis poses a problem, you may prefer to use one of thealternativemethods mentioned earlier.

The <video> Tag

The code for inserting a video is:

The video file in the example above is 'demo.webm' located in the same directory as the web page loading it.This particular video is in the WebM format. (I will discuss video formats in greater detail later in this article.)The optional poster attribute is used to display an initial image on the video player screen. Thewidth attribute, also optional, specifies the width of the video player in pixels. There is also aheight attribute for those who want to include that too. The controls attributeinserts buttons onto the player, allowing your visitor to pause, resume playback, change the volume, etc. The exact controlsit inserts into the player varies from browser to browser. Like width, poster and height,it is optional.

Other possibly useful attributes include the following:

• loop: causes the browser to seek back to the beginning of the video when the it reaches the end.

• muted: mute the video by default.

• autoplay: start playing the video immediately without waiting for your visitor to initiate it.It is useful if you want to irritateyour visitors and drive them away, or if your site is a video sharing site like YouTube, where the only reasonpeople are at any page is to view the video there.

• preload: this attribute hints to the browser (that is, the latter is not required to follow it)how much of the video it is to load in advance, prior to user-interaction. Allowed values include none(don't preload anything), metadata (preload meta data only), and auto (the browser is freeto do as it pleases, even preloading the entire video). The default value varies from browser to browser.

You can also insert content between the opening <video> and closing </video> tags.It will only be displayed in older browsers, that is, those that do not support the <video> tag. For example,the following issues an error message in such browsers.

You can, of course, write whatever you want. You can even insert ascript to load yourvideo using Flash or Silverlight in that space, if you are so inclined.

How to Use Alternative Video Formats

My demo for the HTML5 video tag uses thecode below.

As you can see, it provides two alternative video formats, MP4 and WebM. As such, the URLs pointing to the videofiles are now written separately in their own <source> tags instead of being specified in thesrc attribute of <video>. The <source> tagallows you to specify different alternative formats so that web browsers that don't support one format can choose another.

Supported Video Formats

Yottieeasily Add Youtube Videos To Your Site Page

• The MP4 format, containing video encoded in H.264, is supported out-of-the-box by Internet Explorer 9 and above, andcurrent versions (and probably many of the older ones too) of Microsoft Edge, Chrome, Firefox, Opera and Safari.If you don't mind using something that is patent-encumbered, this is probably the most cross-compatible video format at the moment.

• The WebM format, containing video encoded using VP8, is supported out-of-the-box by Firefox, Chrome, Opera (and possiblythe other Chromium-derived browsers) and later versions of Android. As you may already know, this format is licensed toeveryone for free, and so it is generally preferred if only the web browser vendors can get their act together.

  It is possible to install a plugin in IE 9 and above, as well as Safari, to support WebM playback, however since itis not part of the default installation, you can't rely on visitors having it.

  As for Edge, I understand that Microsoft intends to add support for WebM, or perhaps has already done so.(Sorry, I don't currently use Windows 10, which is needed for Edge, and I can't be bothered to download avirtual machine just totest it for this tutorial.)

• There is also the older Ogg format, with even poorer browser support than WebM. If you want to use thisformat, the type attribute on <source> is 'video/ogg'.Note that Ogg is supposed to be inferior to WebM in terms of its compression to quality ratio, so if your intention isto only use freely-licensed formats, you should probably use WebM instead.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

It will appear on your page as:

Yottieeasily Add Youtube Videos To Your Site Free

Yottieeasily Add Youtube Videos To Your Site Download

Yottieeasily Add Youtube Videos To Your Site Online