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 AWS S3 videos with HTML Embed component on Webflow, not the video element.
- Ensure S3 URLs are public, end with video file type, and apply HTML5 video tag for embedding.
Embedding a video from an S3 bucket directly in Webflow might cause an "Invalid embed type: link" error due to the video URL not being properly formatted for Webflow's video element.
1. Understand the Video Requirements in Webflow
- Webflow’s video element typically supports video URLs from platforms like YouTube and Vimeo.
- Direct links from services like AWS S3 often don't embed correctly without appropriate handling or transformation.
2. Check S3 Bucket Permissions
- Ensure that your S3 bucket permissions allow public access to the video file.
- Check that the URL is publicly accessible and not locked behind private permissions or requiring authentication.
3. Use a Compatible Video URL
- Direct linking from S3 will not create an embeddable video tag with Webflow’s video element.
- Consider using Webflow's HTML Embed component if you need to use such URLs, allowing you to manually specify a video tag.
4. HTML Embed Solution
- Replace Webflow's video element with an HTML Embed element on your Webflow page.
- Use HTML5 video tag, e.g.,
<video controls><source src="your-s3-video-url.mp4" type="video/mp4"></video>, to manually reference your S3 video URL.
5. Verify Video Link and Test
- Verify that the S3 URL is correctly linked and ends with an appropriate video file extension like
.mp4. - Test the embed on Webflow by publishing or previewing the page to ensure the video plays as expected.
Summary
Your S3 video URL likely isn't compatible with Webflow's video element due to its mismatched format. Use the HTML Embed component with a valid HTML5 video tag to work around this limitation and ensure your video displays correctly.
