Using Video in Webflow

YouTube | How to Embed YouTube Shorts

No items found.
Overview
Webflow-Native Video Sources
Video Sources & URLs
Intro
401
Responsive Video
Intro
402
YouTube | How to Embed YouTube Shorts
Intro
2:40
403
YouTube | How to Start Playback at a Specific Point
Intro
3:18
404
Suppressing YouTube Related Videos
Intro
405
Transparent Videos
Intro
406
Pause Videos when Hidden
Intro
408
Other Video Sources
Hosting Video on Google Drive
Intro
501
No items found.

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.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.