Video Tutorial of Video element
What is a Video element on Dotcom?
The Video element in Dotcom helps you insert a video into your Dotcom website. Use a simple drag-and-drop tool to insert the video and then customize the style for the video to suit the overall branding of your website. Adding a video to any page on your site improves engagement and boosts SEO.
Steps to use the Video Element on Dotcom
- On your Dotcom dashboard, navigate to the Themes menu. Select your theme from the My Themes section. Click on the three-dot icon to open a floating menu. Now, click on Edit to open the theme dashboard.
- Here, select the page on which you want to insert the video from the Select dropdown to open that page on your screen.
- In the Elements tab, drag and drop the Video element into position on the page layout.
- Hover over the dropped Video element. It has three sections. You can customize each section individually to customize the video.
- Add/edit the video
- Edit the video container column.
- Edit the video container row.
- Let’s see how to add a video and edit its style.
How to add/edit a video on Dotcom?
- Click on the edit icon for the video. This allows us to upload a video to the Video element.
- The customization panel loads on your screen’s right side. Here, you have 3 tabs.
How to edit the content of the Video element on Dotcom?
- In the Content section, click on the edit icon on the minimized video.
- Next, click on Upload Video and upload a video from your computer (up to 25 MB max). The video gets added to the library. You can upload as many videos as you want to the library.
- To add a video from the library to the video element container, click on the video and then on Save. The video gets added to the container of the Video element.
- To change the video in the container, upload another video from your computer and/or click on the video you want to add from the video library. Click on Save. This video gets added to the Video element container, replacing the older one.
- If you want to delete the video from the Video element container, hover over the added video and click on the delete icon.
- Now, let’s set some features for the video. Enable the Video Thumbnail toggle switch if you want to set a thumbnail for the video.
- Next, click on Upload to upload the thumbnail image (Max size 160x160) in JPG or PNG format not exceeding 5MB from your computer.
- To insert an external video URL, enable the External URL toggle switch and then add the URL (it should be a source file link and not a site link). Set a Start Time and End Time for the video.
- The Autoplay toggle switch enables you to play the video automatically when the page loads on the browser.
- You can disable the player controls by disabling the Player Controls toggle switch. But we recommend keeping it enabled.
- Toggle the Loop switch on if you want the video to run continuously in a loop as long as the page is open on the browser.
- The Mute toggle switch gives you the flexibility to keep the video sound on or off on your page.
- Save when you are done with the content customizations.
How to customize the style of the Video element on Dotcom?
- Let’s now start customizing the video. Navigate to the Style tab for the video.
- Click on the Aspect Ratio dropdown and select your required option for the video’s screen size aspect ratio.
- To insert the Box Shadow effect, click on the edit icon and select the style as Drop Shadow or Inner Shadow from the dropdown.
- Next, click on the color box to select the color from the color picker tool. All the color boxes in Dotcom give you three ways to select a color.
- Enter the color values in HEX, RGB, or HSL.
- Use the color slider and click on the color in the frame.
- Click on the dropper and move the patch to any place on the screen to pick the exact color.
- Once you have selected the color, fill in the X and Y values. Fill in the values for Blur and Spread. Adjust the values using the increment-decrement counter.
How to configure advanced settings for the Video Element on Dotcom?
- Navigate to the Advanced tab to configure some advanced settings for the Video element.
- Once we have completed customizing the Video element, let’s start with the customizations for its container column and row.
2. How to edit the Video container column on Dotcom?
- Hover over the Video element and click on the edit icon for the container column. The Customization panel loads on the right side with three tabs. Items here include-
- Complete customizing the container column to suit your branding requirements.
3. How to edit the Video container row on Dotcom?
- Hover over the Video element and click on the edit icon for the container row. The Customization panel loads on the right side with three tabs.
- Customize the container row to match the website theme.
You can perform some general customizations, such as deleting or duplicating the Video element on Dotcom. That ends our tutorial on how to use the Video Element on Dotcom.
If you have any questions regarding creating sites on Dotcom, we recommend reaching out to our implementation specialist or contacting our support team for further assistance.