How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?
TL;DR
- Add custom attributes to the embedded video in Webflow, using "loop" with an empty value to enable looping.
- For hover effects, include custom CSS in Project Settings to remove video controls when the video container is hovered.
- Embed the video using an Embed Component, modifying the video URL to include looping parameters for YouTube or Vimeo.
To make an embedded video loop and remove controls on hover in Webflow, follow these steps.
1. Use Custom Attributes for Looping
- Select the Embedded Video on your Webflow page.
- In the Settings Panel, locate the option to add Custom Attributes.
- Add an attribute with the name loop and leave the value field empty. This ensures the video will loop once it finishes.
2. Add Custom CSS for Hover Effects
- Go to Project Settings and navigate to the Custom Code section.
- In the Head Code section, add the following CSS to remove video controls on hover:
```css
<style>
.video-container:hover video::-webkit-media-controls {
display: none;
}
</style>
```
- Ensure your video is wrapped in a container with the class "video-container" to apply this effect.
3. Embed the Video with Adjusted Options
- Use the Embed Component in Webflow to insert your video.
- For YouTube videos, append
&autoplay=1&loop=1&playlist=VIDEO_IDto the video URL. Replace VIDEO_ID with your video's actual ID. - For Vimeo, use the parameter
loop=1in the query string.
Summary
To loop your embedded video in Webflow, use custom attributes for looping and edit the video URL to include necessary parameters. To remove controls on hover, apply custom CSS targeting the video container. This approach ensures your video loops seamlessly and enhances user interaction by removing the controls on hover.