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:
This will enable the video to automatically start playing when the page loads if the browser can handle the feature.
Change the YouTube widget highlight color from Red to White
Hide the Player controls
Hide additional YouTube branding on the player
Hide information overlay on the video player
**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>
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.