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 WordPress.com

If you have a site hosted on WordPress.com, 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' type='text/html' width='540' height='960' src='https://www.youtube.com/embed/iZQpb89LauU?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></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

w=540&h=960

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 WordPress.com 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 vimeo.com/)

Embedding a vertical video on a webpage

Embedding the video on a webpage other that those hosted on WordPress.com 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.

Advertisements

4 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

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s