Adding a YouTube video to your site is quick and easy with the YouTube component. Open your site in the editor, then drag the component to a page of your site. Next, click on the component to open the options panel to the side of the website editor.
Video ID
The only option you specifically need to configure is to enter the ID of your YouTube video in the Video ID field. To get the idea, open your YouTube video in a browser tab and look at the URL, which should look something like this: https://www.youtube.com/watch?v=DIkqs9_FK28.
The ID is the last part of the URL after the equals sign, so in this case, DIkqs9_FK28. Copy that ID and paste it into the field.
Player
There are couple options in this group will control how the player functions:
- Enhanced Privacy Mode - Toggling this option *on* prevents the use of views of embedded YouTube content from influencing the viewer’s browsing experience on YouTube. For more information, see the section on Enhanced Privacy Mode in YouTube’s article on Embedding Videos.
- Show Controls - This option is toggled on by default, and will show video controls on the component.
Size & Position
The options within this group control the overall size, shape, and position of the video.
- Width - With this option, you can set the width proportional to the overall width of the component, e.g. 1/2. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Height - You can adjust the general height of the video with this option, and set it separately for different screen sizes by clicking the desktop/mobile icon.
- Align - With smaller widths, you can use this option to align the video to the left, right, or center of the component.
Design
With the options in this group you can control the shape of the video, which by default uses what you have set in your site settings. You can also add a border to the video, and set the width, color, and style of it.
Spacing
The options in this group control spacing of the component. Margin controls the space around the video within the component, and Padding controls the space between the border and the embedded video itself. Both can be set separately for different screen sizes.
Hover
To control the design of the component when a visitor hovers over it with a mouse, click on Hover at the top of the options panel. From there you can then customize the width, color, and style of the border.