YouTube offers a wealth of features for video publishing and manipulation. What makes the YouTube platform extremely powerful, however, is the ability for users to easily integrate video into any of their own, external, webpages. Through video integration, YouTube has transformed itself from simply a catalog of videos, into the largest video host on the Internet.
In order to add YouTube video to any web page, the only requirement is the ability to add HTML to that page. This can be done in most editors through a “Source” view that shows HTML tags in addition to the text. The steps to add the YouTube video to the page source are as follows:
- Open a browser and navigate to the YouTube video that will be inserted into the web page
- Click the “Share” button on the video’s YouTube page. The Share button is in the video information panel, to the left of the number of Views, and below the video title
- Under the “Share” tab that unrolls, click “Embed”. This will open a panel with options for configuration of the video playback
- Configure the video size, and make sure to uncheck “Show suggested videos when the video finishes”. This will prevent unrelated videos from showing on your website after the video has finished playing.
- Copy the full YouTube HTML embed code in the text box. It will likely begin with the word “<iframe”
- Paste the YouTube Embed HTML into the “Source” view of the website content editor, at the location where the video should appear.
When pasting the video, there are additional parameters that can be embedded to customize video playback. After pasting the Embed tag, insert any of the following parameters directly after following text:
?rel=0
&autoplay=1
This will enable the video to automatically start playing when the page loads if the browser can handle the feature.
&color=white
Change the YouTube widget highlight color from Red to White
&controls=0
Hide the Player controls
&modestbranding=1
Hide additional YouTube branding on the player
&showinfo=0
Hide information overlay on the video player
&vq=[small,medium,large,or hd720]
**Hidden Feature** Change the default video quality for playback. Choose one of the above values for the vq parameter, without the brackets.
For example, integrating the YouTube Video Player with “large” quality (480p), would produce the following Embed code:
<iframe width="560" height="315" src="//www.youtube.com/embed/fBQCQ6HL2Yw?rel=0&vq=large" frameborder="0" allowfullscreen></iframe>
In addition to these features, full control over the YouTube player can be done programmatically through the JavaScript API. For basic HTML editing, however, these embed codes provide a simple and easy way for webmasters to add video to their websites and customize the way that video will be played.
See additional information Custom Web Development Chicago
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
