Is it possible to crop/mask a YouTube video into a square and vertical size using Webflow?

Published on
September 22, 2023

Yes, it is possible to crop or mask a YouTube video into a square or vertical size using Webflow. The process involves using custom code to apply CSS styles to the video container. Here's a step-by-step guide on how to achieve this:

  1. Add a Div Block to your Webflow project to act as the video container.

  2. Inside the Div Block, add an Embed element by clicking on the "+" button and selecting "Embed" from the menu.

  3. In the Embed settings panel on the right, paste the YouTube video URL or embed code into the "Embed Code" field. The video will now appear inside the Div Block.

  4. Give the Div Block a class name by selecting it and going to the Styles panel on the right. Click on the "+" button next to the class field and enter a class name.

  5. Open the Custom Code section by clicking on the gear icon in the top-right corner of the Designer view.

  6. In the Custom Code section, add the following CSS code:

```css
.your-video-class {
position: relative;
padding-bottom: 100%; /_ This sets the aspect ratio of the video container _/
overflow: hidden;
}

.your-video-class iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```

  1. Replace "your-video-class" with the class name you assigned to the Div Block.

  2. Now, depending on whether you want a square or vertical video, adjust the padding-bottom value in the CSS code. For a square video, set the padding-bottom to 100%. For a vertical video, set it to a higher percentage to create a taller container.

  3. Save the changes and preview your Webflow project. The YouTube video will now be cropped or masked into the desired shape.

By following these steps, you can crop or mask a YouTube video into a square or vertical size using Webflow. This customization allows you to create unique video layouts that fit your website's design requirements.

Additional Questions:

  1. How can I make a YouTube video responsive in Webflow?
  2. Can I customize the playback controls of a YouTube video embedded in Webflow?
  3. Is it possible to autoplay a YouTube video in Webflow?