How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?

TL;DR
  • Modify the video URL parameters to enable looping and autoplay; use ?loop=1&autoplay=1 for YouTube or &loop=1 for Vimeo.
  • Insert an Embed element in Webflow with the modified video URL.
  • Add custom CSS in the Webflow settings to hide video controls on hover using a rule targeting the specific video class.

When you want to make an embedded video in Webflow loop and remove video controls on hover, follow the steps below.

​

1. Enable Looping for Embedded Video

  • Find the Video URL: Locate the URL of the video you want to embed.
  • Modify the URL Parameters: Add ?loop=1&autoplay=1 to the end of the URL if it is a YouTube video. For Vimeo, you add &loop=1 in the embed settings.
  • Embed the Video in Webflow: Use an Embed element in Webflow to insert your custom video embed code with the modified URL.

​

2. Remove Video Controls on Hover

  • Insert Custom CSS: Use the Custom Code section of your Webflow project settings or page settings to add CSS.
  • Use Appropriate CSS Rules: Add CSS like .video-element:hover::-webkit-media-controls { display: none !important; } to hide the controls on hover. Replace .video-element with the class of your video.

​

3. Add Negative Margin (Optional)

  • Adjust Video Position: If removing controls affects layout, consider giving the video a negative top margin in the CSS to adjust positioning.

​

Summary

To loop an embedded video in Webflow and remove controls on hover, modify the video URL parameters for looping and add custom CSS for control visibility. Adjust video position if necessary with CSS.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I replace a video background with a still image for mobile devices on Webflow without causing page load issues?
How can you access the content of a Webflow CMS website without rebuilding everything if the customer no longer wants to use the site as a CMS?
How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.
How can I edit the pop-up shown in the attachment using Webflow?
Is it possible to create a social media platform with features like user registration, user dashboards, dynamic item publishing, an explore page with infinite scroll, saved content, and following functionality using Webflow?
Is it possible to link 100 individual landing pages created on Webflow to a BigCommerce website, maintaining a seamless user experience?
How can I display more than 5 items in a collection list with Webflow's business hosting plan?
Can someone provide a detailed tutorial on creating a 2-page sign-up form on Webflow? Specifically, the tutorial should include information about passing data from page 1 to page 2, having a custom waiting text on the 'next page' button, adding a pause on the first 'next page' button, implementing basic validation for email and phone number, and utilizing the form success message setting. Thank you!
What is a simple step-by-step guide for setting up fullpage.js in Webflow?
Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?
Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.
Can I create vertical tabs in Webflow?
Can Webflow automatically log out users after a period of inactivity without using Memberstack?
How can I redirect to the default Webflow success message after submitting a form using a third-party form processor during site export?
Is it possible to unbind and rebind a collection list on a Webflow page without having to delete the list and start over?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?