In this article, you will learn three possible ways to include videos into your web project.
Table of contents
1. Embedding YouTube/Vimeo videos via their respective elements
The following steps are the same when adding a Vimeo Video.
The easiest way to embed a YouTube video is by copying the URL of the video and pasting it into our YouTube element. First, let's create the video element:
Click + Add content to access all the presets and elements or use Create Element inside your target container. Choose the Video element and drag it into the area with dashed border.
Paste the YouTube URL to load the video. Let's have a brief look at your options here:
- Aspect ratio: Adjust the Aspect Ratio of your video.
- Lazy Load: This setting determines whether the video shall be loaded in advance or only after hitting the play button.
- Show controls: This will enable or disable the play button, volume control etc.
- Show related videos: After the video has ended there will be a list of suggested videos from YouTube, when this is enabled.
2. Embedding video files directly
You can also upload any mp4 video file to your media manager and include it into the website. This image shows how you can drag and drop any file into your media manager. You can also click into the dashed area and pick a file from your harddrive.
Next we will have to create an HTML element at the place where we want to show our video. We are using this HTML code to embed our video:
<video width="320" height="240" autoplay controls > <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video><br>
Let's have a look at what each parameter does:
- width/height: sets the width and height of the videoplayer (
- autoplay: determines whether the video plays automatically or not (omit the parameter to disable autoplay)
- controls: determines whether video controls like play/pause and volume are visible
- source: this is where we need to paste our link to the video file inside the media manager. This image will show you how to do it
Make sure you mark the text "movie.mp4" text inside the <source src="..."> tag. Next click Paste file to access the media manager and then simply pick the video file from there (double click or mark and hit the checkmark). This will automatically paste in the path to the file. It usually pastes media files wherever the cursor is active, that's why we marked the text to be replaced first. If successful it should look like in the image above.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to email@example.com .