How to embed a vertical video from YouTube or Vimeo

In my series of posts on Snapchat for journalists I mentioned that you can embed vertical video so that it doesn’t have those annoying black bars either side. Here’s how.

OK, so YouTube may not support vertical video as a format on desktop (it does on the mobile app) but you can embed a vertical video hosted on YouTube so that it is presented as a vertical format on your own webpage.

This is particularly useful if you’ve created a video using the Snapchat app, or merely filmed on your phone without remembering to rotate it, and want to use it on a normal site.

The key is to set the width and height properties of your embedded video so that the video is cropped to the vertical element. Here’s how.

Snapchat book cover

This post is an extract from the book Snapchat for Journalists

Embedding a vertical video on

If you have a site hosted on, you can embed your video by using the YouTube shortcode and the width and height in the URL.

Here’s an example:

<span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" width="540" height="960" src="" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe></span>

I can only use a screenshot here as the code itself will embed a video, even when tagged as ‘code’

Just adapt the code above but replace the URL with the video URL you want to use. The key part is


This sets the width at 540 pixels and the height at 960 pixels.

You can also set different dimensions – as long as they have the same relationship to each other.

Embedding vertical video from Vimeo

You can do this with videos on Vimeo as well. However, the code isn’t entirely effective: you won’t end up with a vertical video but you will end up with something close to square, and therefore the black edges become less intrusive.

You can find guidance on the shortcode required on the help pages for Vimeo.

To specify width and height adapt your shortcode like so:

[vimeo 44633289 w=540&h=960]

Replace the Vimeo id number above with the id from your own Vimeo URL (the number that comes after

Embedding a vertical video on a webpage

Embedding the video on a webpage other that those hosted on involves a similar customisation of the YouTube or Vimeo embed code. Here’s an example:

And here’s a Vimeo example:

Once again you just need to change the URL and make sure the height and width are the same or proportionate to the example above.

Note: this assumes you can edit the HTML and it supports iframes.


9 thoughts on “How to embed a vertical video from YouTube or Vimeo

  1. Pingback: Embedding is the new linking | Online Journalism Blog

  2. Pingback: The most-read posts on Online Journalism Blog — and on Medium — in 2016 | Online Journalism Blog

  3. Pingback: Veri gazetecilerinin araç çantası (Güncelleniyor) – Açık Veri ve Veri Gazeteciliği Türkiye

  4. Pingback: Journalist’s Toolbox | A Society of Professional Journalists Blog – English4Media / اللغة الانكليزية للاعلام

  5. Pingback: 5 Future Instagram Trends to look out for | techonutty

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.