Why does the video element in Webflow show an "Invalid embed type: link" error when trying to set a public video URL from S3?

TL;DR
  • Use Webflow’s HTML Embed element with a third-party player and set up video access through CORS, or opt for YouTube/Vimeo for smooth integration.
  • Include necessary JS/CSS libraries for third-party players like Video.js or Plyr in Webflow’s custom code section.

The "Invalid embed type: link" error occurs when attempting to use a public video URL from an S3 bucket in the Webflow video element. This usually happens because Webflow's video element is designed to work with video hosting platforms like YouTube or Vimeo, requiring specific embed formats.

​

1. Understanding Webflow’s Video Element

  • Video Hosting Support: Webflow's video element supports YouTube and Vimeo natively. It requires URLs that can provide an embeddable player.
  • File Storage Services: S3 is a file storage service and doesn't provide a direct video player for embedding like YouTube or Vimeo.

​

2. Alternatives to S3 Links

  • Third-Party Services: Consider using video hosting platforms like YouTube, Vimeo, or Wistia for direct embedding.
  • Webflow’s HTML Embed Element: If S3 must be used, consider a custom player approach:
  • Upload the video to S3 and ensure CORS (Cross-Origin Resource Sharing) settings allow access.
  • Use Webflow’s HTML Embed Element to manually configure a third-party video player (e.g., Video.js or Plyr) that can play the video file.

​

3. Configuring a Third-Party Player

  • Choose a Player: Select a player like Video.js or Plyr.
  • Script and CSS: Include necessary JS/CSS libraries in Webflow’s Project Settings, typically in the Custom Code section.
  • Embed Custom Code: Use the HTML Embed element to insert the player configuration alongside the S3 file URL.

​

Summary

The "Invalid embed type: link" error is due to Webflow's video element not supporting direct S3 URLs. To resolve it, consider using video hosting services like YouTube/Vimeo or manually configuring a third-party HTML player with the HTML Embed element.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Are there any online resources that can help me build a custom donation form in Webflow that can connect to a payment partner allowing for iDEAL payments in the Netherlands?
How can I remove the error alert about improperly configured forms on my exported site in Webflow, without editing the Webflow js file directly?
How can I create a hero animation like the one on Webflow?
How can I export and host a website built on Webflow and make a form work to send details to my client's email instead of using Webflow?
Is it possible to create an integration/plugin for Webflow that enables bulk upload of image assets from Figma/Sketch/Adobe? Can you please provide information on how to gain API access and the relevant technical documentation for this?
How can I fix the issue where the first grid area is always empty when using Webflow's Grid feature?
How can I fix the issue with my pop-up modal on Webflow's pricing page (specifically on mobile) where the modal takes up the entire screen and the user can't scroll down to press the "Sign-Up" button?
How can I improve the hero design and spacing between page elements on my Webflow website for my wife's gym?
Are there alternative payment methods available in India for purchasing a new "site plan" on Webflow, considering the issues with the Reserve Bank of India regulation?
How can I create shareable links for the pop-ups I created on Webflow, so that clicking on the links will open the pop-ups directly, without the need to click on the buttons?
Is it illegal for a company to steal a website layout when the website was hosted on Webflow and how did the new company get access to my files without my permission?
Is the reduced video quality when uploading a background video to Webflow due to the video's export settings or something else on Webflow?
Can Webflow buttons or thumbnails be used to change the video in the video player?
Has anyone experienced issues with autoplay and looping on Webflow when adding a Vimeo video section?
How can I create a calculator using Webflow?
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?