How To Add a Video To the Page

Most of the blocks that allow embedding video are located in the "Video" category of the Tilda's Block Library.

There are several options to add a video on your website: Adding YouTube and Vimeo videos, Kinescope, an option to add the direct link to a video on a third-party server (HTML5 video), and using iFrame to add a video.

You can add the YouTube videos using blocks VD01 (one video), VD04 (displaying a video after you click the Play button), VD06N (two videos), VD08 (video and text), VD09 (pop-up video), VD11 (video with a custom cover), VD12 (video and image in a row), VD13 (YouTube live stream with a live chat), VD14 (video playlist), VD16 (video widget), AB701 (Title, description, and video), BF402N (Video or image and form in two columns), some gallery blocks, and also blocks with a fullscreen image as a background (learn more about adding a video as a background).

To add a video, you need just a link to a video that is publicly available and enabled for embedding on third-party websites in the privacy settings.

Choose the block you like the most, go to its Content tab, and insert a link to the video.

If you want the video to play from a certain moment, add the ?start= fragment to the URL and specify the required time in seconds from the beginning of the video. For example, XEfDYMngJeE?start=5025. In this case, the video will play from the 5025th second. You can quickly copy the time by right-clicking on the player and selecting the "Copy video URL at current time" option.

You can add the Vimeo videos using blocks VD01 (one video), VD04 (displaying a video after you click the Play button), VD06N (two videos), VD08 (video and text), VD09 (pop-up video), VD11 (video with a custom cover), VD12 (video and image in a row), VD14 (video playlist), VD16 (video widget), AB701 (Title, description, and video), BF402N (Video or image and form in two columns), and some gallery blocks, and also blocks with a fullscreen image as a background.

If your video is locked by Vimeo privacy settings, it'll have an additional combination of numbers and letters at the end of the link after the video ID. For the video to play, add this combination to the Vimeo Private Link Hash field.

If your video is not published on the mentioned video hosting services, you can upload it on your own server and insert it using the following HTML5 video blocks: VD01 (one video), VD04 (displaying a video after you click the Play button), VD08 (video and text), VD09 (pop-up video), VD11 (video with a custom cover), VD12 (video and image in a row), VD16 (video widget), AB701 (Title, description, and video), BF402N (Video or image and form in two columns), and some gallery blocks. You can also add an HTML5 video as a background on your website, using blocks with fullscreen background (learn more about adding a video as a background).

To add such a video to the page, you need to use WebM and MP4 video files. You can convert videos into these formats by using online converters or video editing or converting software. Then place it on hosting and get a direct link to the file. Note that you'll most likely need to use a paid file hosting service as not all file storage services have such a feature.

Go to the Content tab of the HTML5 video block and add the link to your videos in both formats in the required fields.

To add a direct link to a file in an HTML5 video block, you need to upload it to a file storage service. Cloud storage options such as Google Drive or Dropbox are not suitable for this as they do not provide a direct link to a file.

For this task, you need to use services or hosting providers that offer file storage service. Let's look into the process of how to upload a file and get a direct link to it using the Selectel as an example.

You can add the Kinescope videos using blocks VD01 (one video), VD04 (displaying a video after you click the Play button), VD08 (video and text), VD09 (pop-up video), VD11 (video with a custom cover), VD12 (video and image in a row), VD14 (video playlist), AB701 (Title, description, and video), BF402N (Video or image and form in two columns), and also some blocks with a fullscreen image as a background.

To start working with Kinescope, you need to sign up for https://www.kinescope.com/ website or sign in your account.

To upload your video to Kinescope, click the New button in the right upper corner, select "Upload a file" and add a video.

To add the video to the website, click the button with three dots near the video in the Catalog → Copy the link → Paste the link in the Content tab of the block in Tilda.

You can add videos with iFrame using blocks VD01 (one video), VD04 (displaying a video after you click the Play button), VD08 (video and text), VD09 (pop-up video), VD11 (video with a custom cover), VD12 (video and image in a row), VD14 (video playlist), AB701 (Title, description, and video), BF402N (Video or image and form in two columns).

This option allows adding videos from any platform that provides iframe code for embedding video in a website.

With this option, the "Autoplay video" and "Video with sound muted" settings will not work. If the platform hosting the video allows this, you can insert the Autoplay and Mute parameters in the link.

You can use video for a cover or other blocks with an image as a background instead of a static background image. Go to the Content tab and paste a link to your video in the required field. You can use a YouTube video link or an HTML5 video link that you've got using the guide above.

The playlist block is in the "Video" category → VD14 block.

This block supports videos from YouTube, Vimeo, and Kinescope services. To add a video, you need to specify its data in the following format:
Link to the video; Video title; Video duration; Video description

Brief summary for each video in the playlist should be specified from a new line.

Video widget is a small video in the corner of the screen that can help you share the story of your product or service. The preview plays without sound, and if you click it, the main video with sound is loaded.

To add the video widget, go to the Video category and select the VD16 block.

Before adding it, you should prepare and optimize your video for the web (using special software or online editors such as Veed.io).

After that, upload the file to a service that provides video storage and access to it using a direct link.

Go to the Content tab of the block and paste the link to the main video.

You can add the preview video version optionally. It can help users get an introductory idea of the main video and reduce the website loading time.
The optimal video size is 200px wide and up to 5 seconds.

You can specify a link and text to the button on the main video as well if your goal is to encourage a visitor to do some kind of action. If you do not need a button, just keep the fields empty.

In the block settings, you can adjust the parameters of the widget, the main video that opens, and buttons. For the widget, you can specify the aspect ratio, width and parameters of the border, position on the screen, and other parameters. For the main video, you can configure the border, shadow, and Play button parameters. The video width is always fixed — 560x315 for horizontal videos and vice versa — 315x560 for vertical videos.

To add a video in Zero Block → click the (+) button and add a Video element → select one of the available options to add a video: YouTube, Vimeo, MP4, Kinescope → paste the link to the video or its ID.

To add videos from other services, you can use the HTML code embedding option: Add the HTML element → click the Edit Code button in the settings panel → specify the code to embed the player. Below ↓ you can find examples of how to get the code.

In the Product Catalog, you can add a video to showcase the product. To do this, go to the product card → click the "Video" link near any product image and insert the link to a YouTube, Vimeo, or Kinescope video or its ID.

In Feeds, you can add both the main video for the post (it'll be displayed at the beginning of the post and used as a cover in the list of posts) and insert several videos in the Feeds' post text.

To add the main video, go to the field with an image in the Feeds' post editing card → the "Video" tab, and paste the link to the video.

The video will be displayed at the beginning of the post.

To add a video in the post's text, click the plus icon to the left → add a Video block → click it and specify the link to the video.

By clicking the three dots to the left of the block, you can change the video.

The video will be inserted in the post's text. Save the changes.

After that, the video will be displayed in the text on the post's page.

You can add videos by embedding the player's code into the HTML code block. To do this, go to the player or service settings to get the code for embedding.

For Kinescope, click the button with three dots near a video in the list → Embed → select responsive code if you need to adjust the player to the screen size or fixed code to add a small player and specify its size and position in the copied code → paste the code you have received to the T123 block from the "Other" category or in the HTML element in Zero Block.