Adding Video to Pages and Posts

Video has become increasingly important for storytelling and engaging audiences. Largo supports embedded video in pages and posts with handy tools, primarily the Add Media and Set Featured Media buttons:

For most posts, you'll want to use the Featured Media button to add an image or other media item to the top of the post. But you can just as easily use it to place a video at the top of the post. Click the button to open the Featured Media screen. Note the options, outlined in green in this screenshot:

Use the Add Media button to insert a media item inside the body of a post. Notice the options (outlined in green in this screenshot) are slightly different:

The Add Media screen doesn't have an option to insert videos inside posts or pages. But that's okay, we use the Module Wrapper for that. We'll cover all the ways of adding media below.

Video as Featured Media

Begin by uploading the video to Vimeo, YouTube, or another video hosting provider that offers embed code for sharing video. Once the video is processed, go to the video page and click the Share button. You'll want to copy the link (the URL) to the video, as shown here for Vimeo:

Return to editing the post on your Largo site, click the Set Featured Media button, and select Featured Video. You can then paste the video-sharing URL into the Video URL field:

For videos hosted on YouTube and Vimeo, Largo will automatically pull in the Video Embed code, thumbnail, title, caption, and credit. For other video hosting providers, you may need to add some or all of these manually. In any case, you can edit them in the Featured Video screen before posting, or by editing the post later. To edit later, click the Edit Featured Media button, and edit as desired.

Remember that Featured Media will always display at the very top of a post.

Adding Video in the Body of a Page or Post

In Publishing Content: Text Formatting, we covered how to use the Module Wrapper to create pull quotes. We use the same approach to add video anywhere inside a post or page.

To begin, copy the embed code from a video:

Back in the Largo post edit screen, click the text tab at the top of the editor to switch from Visual to Text mode:

Place your cursor where you want to video to appear in the text, and paste the embed code. Switch back to Visual mode in the editor, and you'll see the video in the body of the text.

Great so far and this will work, but we're not quite finished. The video will look great on desktop computers, but won't resize responsively for tablets and phones. That's why we'll now use the Module Wrapper.

Select the video by dragging your cursor over the video from bottom to top, or vice versa. Then click the Module Wrapper button to open its settings. For Type select Embedded Media, the set an Alignment and Width to suit how you wish the video to display. In most cases you'll probably want the video centered and full width:

The result is something like this video, which displays full widget and resizes responsively:

S.O.C.O from Marcus Armitage on Vimeo.

Caveats

When selecting the video in Visual mode, it's important to select the whole thing which can be tricky. If the entire video embed code isn't wrapped in the Module Wrapper, the video won't be responsive. You can test this by previewing the post.

If it's not right and you don't mind editing a little HTML, you can switch to Text mode and look for the video. It should look like this:

<aside><iframe src="https://player.vimeo.com/video/175183081" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe><a href="https://vimeo.com/175183081">S.O.C.O</a> from <a href="https://vimeo.com/marcusarmitage">Marcus Armitage</a> on <a href="https://vimeo.com">Vimeo</a>.</aside>