Video

Want to embed a YouTube video or insert your own video? With the video element, you totally can!

Adding a video

There are different ways to upload videos in the Ycode editor. You can upload it directly when working on your canvas or via Files in the left-side panel.

Method 1. Canvas (upload video)

  1. In your canvas or layer sidebar, select where the video needs to be added

  2. Go to the top panel and click on the Folders icon to open the menu

  3. Under Videos, click Upload videos

  4. Click on the uploaded video to insert it into your canvas

Method 2. Canvas (YouTube)

  1. In your Canvas or Layer sidebar, select where the video needs to be added

  2. Go to the top panel and click on the Folders icon to open the menu

  3. Under Videos, select the YouTube button. You’ll now see a placeholder video screen in your layout

  4. Select the placeholder and open the Settings tab on the right-hand side

  5. Add the YouTube video ID. This is the number-letter-combination code in the video URL (e.g. cXIoBUXvjZs). You'll copy it right after the watch?v= part:https://www.youtube.com/watch?v=cXIoBUXvjZs

Method 3. Canvas (own video URL)

  1. In your Canvas or Layer sidebar, select where the video needs to be added

  2. Go to the top panel and click on the Folders icon to open the menu

  3. Under Videos, select the Video button. You’ll now see an empty placeholder video screen in your layout

  4. Select the element and open the Settings tab on the right-hand side

  5. Add the video URL. If you don’t have a public video URL, you can upload the video to Ycode to generate a link. Please follow the “Canvas (upload video)” instructions above.

Method 4. Files

  1. In the left-hand side menu, click on the Files icon

  2. In this screen, click on the Upload files button on the upper right

  3. After uploading, head back to your canvas

  4. In your Canvas or Layer sidebar, select where the video needs to be added

  5. Go to the top panel and click on the Folders icon to open the menu

  6. In the video tab, select the uploaded video to insert it on your page

Settings

Select your video and move your mouse to the upper right to open the Settings tab. In this tab, you can manage a few settings:

  • Add a source from your database

  • Add or change the video URL

  • Change the behavior to mute sound, displays controls, loop the video and autoplay

  • Activate privacy mode so cookies aren’t used (for YouTube videos)

Dimensions

Video elements automatically adapt to whatever block they’re embedded in.

If you add a video to a section, it takes up the entire width of the page (great for video backgrounds or dividers). If you add it to a container or grid, the video will adapt to the size of these blocks.

To create custom video dimensions you need to embed the video into a div block. The div block can be found in the top panel. Open the Square icon menu and click Div block. In the block’s Design tab, you can now add your custom dimensions under Sizing.

After that, add your video inside the div and see how it adapts to the size you set.

Styling

Want to give your videos a little glow up? Open the Design tab to start the makeover.

We recommend playing around with these features:

  • Border: Add a border or radius, or both. You can also style the border

  • Effects: Adjust the opacity or add shadows and animations

  • Transform: Scale, rotate, move or skew the video