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.

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:

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.