YouTube Video Help

Embedding YouTube video code on websites

Plugin For HTML5 Video


Getting YouTube video code
YouTube video can be added to any website, to any of the webpages, or you can optionally replace the default Allwebco template videos with YouTube videos. See the help.html included with your template download for the correct setup info and support links.
  • The above example is responsive.
  • Setup a YouTube account and follow the instructions in your account to add your videos on YouTube for public viewing.
  • On YouTube, open any one of your video pages and right click the video. Choose "Copy embed code", which will copy the code to your computer clipboard. You can then paste that code into any of your HTML pages.
  • If you have an Allwebco template, and are setting up the video htm pages, replace only the following highlighted code.

    <iframe src="http://www.youtube.com/embed/6tQR8HIOU1g?rel=0
    &autoplay=1&loop=0&wmode=opaque"


    ...or replace the following line if you now have HTML5 video:

    <script type="text/javascript" src="video-1/video-1.js"></script>


Making the video responsive
If you have a responsive Allwebco template with video, your YouTube code will already be responsive. To have your videos flex in size on mobile devices: remove the height and width code from the YouTube embed code.

Step #1: Place 2 divs around the Youtube iFrame code with class names like the following:

<div class="youtube-width">
<div class="youtube-container">

<iframe src="https://www.youtube.com/embed/52LXnHLyTLA" frameborder="0" allowfullscreen></iframe>
</div>
</div>


Step #2: Select, copy, and paste the following code into your global .css file like the style.css at the bottom.

.youtube-width {
max-width: 500px;
min-width: 200px;
margin: 30px auto 30px auto; /* AUTO CENTERS THE VIDEO + TOP/BOTTOM MARGINS */
}

.youtube-container {
padding-top: 0px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
position: relative;
z-index: 100;
}

.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 101;
}


If you do not have a global .css file, copy and paste the step #2 css code above and paste it into your webpage just before the </head> tag between tags <style type="text/css"> and </style>. View the source code of this webpage to see how this css can be added.

Adjust the max-width and margins in the css code to your desired styles. Adjust the "z-index" number higher or lower if objects are layering over or under your video.



YouTube video play options (parameters)
The "?rel=0" at the end of the video link name is for showing related videos. If set to "?rel=1" it will show related videos at the end of play, if set to "?rel=0" it will not show the related videos. Other options are available. Here is an example:

src="https://www.youtube.com/embed/
6tQR8HIOU1g?rel=0&autoplay=1&loop=0&wmode=opaque"


In the above example related videos are set to "0" to not show related, autoplay is set to "1" for yes, looping is set at "0" to not loop the video and the wmode is set to opaque to allow drop menus (and other floated elements) to display over the video.

Note: In some cases you may need to use ?wmode=transparent or &wmode=transparent if there already is a parameter.


Use a ? at the start of the first parameter or variable, and use a & for all parameters you add after the first one. See Google Developers YouTube Embedded Players and Player Parameters for more options.



Adding YouTube video in a .js file
The following is an example of how to add YouTube video code to a .js file like a "sidebar.js" by adding document.write(' to the start of each of the 3 lines and '); at the end of each of the 3 lines (example code may wrap on this page).


document.write('<div class="youtube-width">');
document.write('<div class="youtube-container">');
document.write('<iframe src="https://www.youtube.com/embed/52LXnHLyTLA" frameborder="0" allowfullscreen></iframe>');
document.write('</div>');
document.write('</div>');

The above code works with the responsive css code shown above on this page.


Error: Video does not work - YouTube error:
It appears that YouTube has finally fixed this issue on their website. In some cases the copied code from YouTube may not work because there is a minor error in the YouTube embed code. The exact error is a missing "https:" that you may need to add as shown highlighted in red in the code below:

https://www.youtube.com/embed/52LXnHLyTLA




Related Topics:
Website Video Options
HTML5 Video


Related Websites:
How To Add a YouTube Video to Your Web Site