To maintain a fixed size of 600x600 for a video embed on mobile view using Webflow, you can utilize a combination of CSS and Webflow's responsive design features. Here's how you can achieve this:
1. Start by adding the video embed element to your Webflow project. You can do this by dragging and dropping the "Embed" element onto your page.
2. In the settings for the embed element, paste the code or URL for your video source. You can use platforms like YouTube or Vimeo to host your video.
3. Once the video embed is added, you need to set up the CSS styles to achieve the fixed size. To access the custom CSS, click on the "Settings" tab in the right sidebar and choose the "Custom Code" option.
4. In the Custom Code section, click on "Add Custom Code" and choose the "Inside
" option. This will allow you to add CSS styles to your project.5. Now, add the following CSS code to set the fixed size for the video embed:
```css
@media (max-width: 767px) {
.video-embed-class {
width: 600px;
height: 600px;
}
}
```
Make sure to replace `.video-embed-class` with the actual class name of your video embed element. You can find the class name by selecting the element and going to the Styles panel.
6. After adding the CSS code, you need to add the class to the video embed element. Select the video embed element and go to the Styles panel. Click on the "+" icon next to the "Class" field and create a new class. Enter the same class name you used in the CSS code (e.g., "video-embed-class").
7. While still having the video embed element selected, navigate to the "Settings" tab in the right sidebar. Click on the "Custom Attributes" option, and add the attribute `data-wf-ignore` with the value of `true`. This attribute will prevent Webflow's built-in responsive styles from affecting the video embed.
8. Finally, publish your Webflow project to see the fixed size of 600x600 for the video embed on mobile view.
By following these steps, you should be able to maintain a fixed size of 600x600 for the video embed on mobile view using Webflow. The CSS code specifically targets mobile devices with a maximum width of 767px, ensuring that the video embed retains its dimensions regardless of the device's screen size.