All Collections
Element Tutorials
Media
How to add a Youtube or Vimeo video to a page
How to add a Youtube or Vimeo video to a page

Learn how to use the Video Element to embed a Youtube or Vimeo video into your page.

Updated over a week ago

How to add a YouTube or Vimeo video to a Shogun page

To add a video to a page only requires a few simple steps. We offer the ability to embed YouTube and Vimeo videos, right into your pages! Simply drag the Video Element onto your page to get started! This can be great to show off your product videos.

The most important first step will be to add your video URL into the Video URL field that is offered in the right hand menu of the editor. It's best to take this right from the browser, as the 'https' part of the URL is quite important! 

You can see the video rendered on your page, but at the moment, this will not play inside of the editor. Fear not, this will still play on the live page! 

YouTube videos that are age-restricted will not display on Shogun pages, you can read more about the restrictions from YouTube.

Setting the aspect ratio of your video

We currently offer two options for setting the aspect ratio of your Video element, 16 x 9 and 4 x 3. What's the difference?

What you set this to really depends on the aspect ratio of your video at the point of upload - you would ideally set this to match so that the video does not look stretched. 16 x 9 generally refers to widescreen content, whereas 4 x 3 is generally smaller, given that the width of the video would be 33% wider than it is high.

Looping your video

Looping your video can create a great effect if you are looking to use this as a background, it creates a very attractive feature of your site that grabs the attention of the visitor. 

💡 Note: loop will not operate as expected when using a set start and end time.

Setting your video to autoplay

Autoplaying your video when a visitor enters your page can be a great way of showcasing your products. The 'autoplay' option can be turned on on the Shogun Video Element to allow you to do just that! It's that simple.

Please note that some browsers have policies in place surrounding autoplaying, if your video is not autoplaying, please refer to our article Why Won't My Video Autoplay for more information.

Muting the audio of your video by default

Sometimes it's useful to mute the audio of your video, this feature does just that. This feature will automatically get toggled when you turn on Autoplay on a video, to help comply with some browser policies surrounding autoplaying.

Setting start and end times

Sometimes not every part of a video is relevant to what you are showcasing. Want to show off your product in part of a video? You can! You can set custom start and end times right in the Shogun editor.

As part of the services that you can use in order to embed your videos into your pages, these services give an option to display related videos at the end of your video. This can sometimes be distracting for visitors as it can sometimes lead you away from your store. You can choose to show or hide these.

Showing related videos is only presented as an option while the video is hosted on YouTube. The option will depopulate from the sidebar if the URL added is from Vimeo.

Hiding video controls

While not currently an option within the Video element, a workaround would be to make use of the Section Element where you can set a video as a background which removes the controls.

Can I add a video from another source?

At the moment, Shogun only supports the use of videos from YouTube and Vimeo, however, if you wish to add a video from another source, you can do so using the HTML element and custom code.

Please note: we are unable to provide support on custom code such as custom video players, please refer to the developers of the code for more information on implementation and troubleshooting.

<video width="640" height="360" controls autoplay muted>
<source src="your-file.webm"
type="video/webm">
<source src="your-file.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>

For more information, see the HTML Video documentation.

Did this answer your question?