With some easy URL editing, you can embed YouTube Shorts in your Webflow video element.
By default, it displays differently, as in this example; however you can override this to make the video window vertical ( see below ).
Walkthrough Example
Take a YouTube short URL like this;
https://www.youtube.com/shorts/lrzq8kfSF-o
TIP: You can search YouTube for shorts, by entering a search term followed by the hashtag #shorts.
Edit it, so that the video ID is now a querystring parameter in this URL format;
https://www.youtube.com/watch?v=lrzq8kfSF-o
TIP: If you are viewing the short in your browser, and you edit the video URL in your browser URL bar, you can simply change shorts to watch, and you'll see YouTube redirect it to the ?v= URL format.
In Webflow, add your video element or Rich Text sub-element, and paste that /watch?v= version of the URL.
You'll get a result like this;
Make the Video Window Portrait
YouTube shorts do not have an HTML Embed option for sharing, however at the new URL you've created, YouTube treats the video as a standard landscape video and the HTML Embed option is available.
You can take that HTML Embed code ( click Share, then HTML Embed ), and then edit it to switch the width and height params so that they are reversed, like this;
<iframe height="560" width="315" src="https://www.youtube.com/embed/lrzq8kfSF-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
TIP: YouTube shorts are typically a video aspect ratio of 9:16 ( opposite of 16:9 ), so any height and width should work as long as the maintain that aspect ratio.
If you then paste that into an HTML embed, Webflow will display the YouTube short in portrait mode, like this;
Autoplay & other options
You can perform some additional configurations using these querystring additions;
- Playback controls can be disabled by adding a querystring param of control=0.
- Autoplay can be enabled by adding a querystring param of autoplay=1, however many modern web browsers have policies in place to prevent videos with sound from autoplaying. The video may not autoplay unless it's muted.
- Muting can be enabled by adding mute=1.
- Related videos that appear at the end of the video cannot be removed however they can be limited to the same channel by adding rel=0.
This embed combines all 4 of these;
Notes
- This approach can be used with the CMS if you want to store a collection of shorts. In this case, I'd store the ID only, and bind it into the HTML Embed.
- Within richtext elements, HTML Embeds to not support flowing text around the embedded element, however this should be achievable using custom CSS and float.
