Add YouTube Video to my Website
You can easily add YouTube videos on your site with the CJT PLUS plugin.
There are a number of YouTube embed code generators, but if you understand the parameters in the code, you can easily build it yourself.
Here is a responsive YouTube embed code example:
<style>
.cjt-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .cjt-container iframe, .cjt-container object, .cjt-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='cjt-container'>
<iframe src='https://www.youtube.com/embed/sIaT8Jl2zpI' frameborder='0'></iframe>
</div>
First find the YouTube ID
- Find the video ID (e.g. sIaT8Jl2zpI) as shown above and copy it to your clipboard.
- Then paste it after the YouTube link ‘https://www.youtube.com/embed/’ as shown below:
For exmaple: https://www.youtube.com/embed/sIaT8Jl2zpI
Common YouTube Embed Parameters
color
This parameter specifies the color that will be used in the player’s video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white. Note: Setting the color parameter to white will disable the modestbranding option.
controls
This parameter indicates whether the video player controls are displayed:
controls=0 – Player controls do not display in the player.
controls=1 (default) – Player controls display in the player.
start
This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. The parameter value is a positive integer.
end
This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. The parameter value is a positive integer.
modestbranding
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar.
fs
Setting this parameter to 0 prevents the fullscreen button from displaying in the player. The default value is 1, which causes the fullscreen button to display.
loop
In the case of a single video player, a setting of 1 causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video. Supported values are 0 and 1, and the default value is 0.
playlist
This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.
autoplay
This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 0 or 1. The default value is 0.
rel
If the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played. NOTE: As of 9/25/18 – this will not disable related videos. Instead, rel=0 will show related videos from the same channel as the video that was just played.
Example of putting some parameters together
First make sure you use the question mark (?) after the YouTube link and after the YouTube video ID.
https://www.youtube.com/embed/sIaT8Jl2zpI?&color=white&controls=1&start=19&end=41&fs=0&rel=0
Now we add the new YouTube embed link to the responsive code example earlier.
<style>
.cjt-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .cjt-container iframe, .cjt-container object, .cjt-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='cjt-container'>
<iframe src='https://www.youtube.com/embed/sIaT8Jl2zpI?&color=white&controls=1&start=19&end=41&fs=0&rel=0' frameborder='0'></iframe>
</div>
Running this code gives you:
Using CJT PLUS to add a YouTube Video to a page
This is where the fun begins, where you will see how we got this to work with CJT PLUS.