A video is a great way to bring your site to life, whether it's an appeal, a talk from your last event, or a quick welcome on your homepage. There are a few different ways to add one, so this helpsheet starts with which one to use, then goes through each in turn.
Which way should I add my video?
Most of the time your video will already be on YouTube. Upload it there first if it isn't. YouTube takes care of making it play smoothly on every device, and it doesn't use up any space on your site.
- Just want a video on one page? Add the YouTube Video includelet to the page and paste in the video's address. It's the quickest way. See Adding a YouTube video to a single page.
- Want it in the middle of your text? Use the Insert/edit media button in the editor. See Adding a video in the middle of your text.
- Want it next to some text? Put the video in a Custom Content includelet, beside your words. See Custom Content below.
- Want it in a carousel, on a blog post or event, in a gallery, or on lots of pages? Add it to your Assets Library as a video, then pick it wherever you'd normally pick an image. See Adding a YouTube video to your Assets Library.
- Want albums of photos and videos that your members can add to? Use the Photo Album app, which has its own Add Video button.
- Video isn't on YouTube? You can upload the video file itself, but there are some limits. See Uploading a video file.
Using a Vimeo video? There's a Vimeo Video includelet that works just like the YouTube one. Vimeo videos can't go in the Assets Library, though.
Adding a YouTube video to a single page
- Go to the Layout tab of the page.
- Click Create a new revision to make changes if you see it, then click Add includelet in the column where you want the video.
- Choose YouTube Video, and paste the video's address (or just its 11-character ID) into YouTube video id or URL.
- Save the includelet settings, then preview and publish the page from the Publishing tab.
Set Fixed aspect ratio to 16x9 (widescreen) (that's the shape of most YouTube videos) and the video will resize to fit the column it's in, so it works on phones too. See Includelets for more on adding includelets.
Adding a video in the middle of your text
- In the editor, click where you want the video, then click the Insert/edit media button.
- Paste the video's YouTube address into Source. (Or click the button beside it and pick a video from your Assets Library.)
- Click Save. The editor turns the address into a player.
Just like an image from your Assets Library, the player fills the width of the column and shrinks to fit on a phone.
Adding a YouTube video to your Assets Library
Once a video is in your Assets Library, you can use it in lots of places across your site, and if you ever need to swap it for a different video you only have to change it in one place.
- Open the Content menu and choose Assets Library.
- Click the Video folder in the left column, then click Create and choose Video.
- Give the video a meaningful File name.
- Paste the video's address into YouTube URL. Any YouTube address will do: the one from your browser's address bar, a short youtu.be sharing link, or just the 11-character video ID.
- Click Save and Publish.
Once it's saved, the edit form shows the video's thumbnail, so you can check you've got the right one. You don't need to make a thumbnail yourself. Voice uses the one YouTube already has.
(Fill in YouTube URL or upload a file, not both. If you try to do both, Voice will ask you to choose.)
Where can I use a video from my Assets Library?
Almost anywhere you can pick an image, you can now pick a video instead. Depending on where you put it, your visitors will see one of two things:
- A player, so they can watch the video right there on the page.
- A thumbnail (the video's picture from YouTube). Clicking it takes them somewhere they can watch, such as a popup or the page the video belongs to.
Carousel, Accordion, or Grid
When you add a content block, the Image or video picker lets you choose a video. It shows as a player in the block. In a carousel, the slides stop turning while someone's watching and carry on once the video stops. Moving to another slide, or closing an accordion panel, pauses the video. If you've set a grid to open items in a popup, the grid shows a thumbnail and the video plays in the popup. See the Carousel, Accordion, or Grid helpsheet.
Custom Content
The image you can put beside your text in a Custom Content includelet can be a video too. It shows as a player next to the text (or above it on a phone). This is a nice way to put a video alongside some words about it.
Blog and Noticeboard posts
When you add or edit a post, use Select Image or Video on the Image or video field. In lists of posts, and in the Latest Posts includelet, visitors see the thumbnail, which links to the post. On the post itself, the video plays. See Noticeboard / Weblog.
Events
Events work the same way as posts. Choose a video in the event's Image or video field. The calendar and the Upcoming Events includelet show the thumbnail, and the event's own page plays the video. See Events Calendar.
Related Media Gallery
Relate videos to a page with Add Related Video on its Relations tab, alongside any images. The Related Media Gallery includelet shows them all in a grid of thumbnails, and clicking one opens the video in a popup. See the Media Gallery helpsheet.
Video Asset
The Video Asset includelet shows one video from your Assets Library as a player. It's like the YouTube Video includelet, but it uses a video that's already in your library.
The clever bit: one video, two places
Here's a neat trick for news stories and other pages that are listed elsewhere on your site.
- On the story's Relations tab, use Add Related Video to relate your video to it.
- Wherever the story is listed (for example in a Filtered Item List on your homepage, with Related Media turned on in its display options), the video's thumbnail appears next to the story, just like a picture would. Clicking it opens the story.
- On the story's own page, a Related Media includelet plays the video.
So you set the video once and it shows as a thumbnail in the listing and as a player on the page. If you've already got Related Media set up to inherit to all the pages in a section, any page with a related video will just show it.
Uploading a video file
If your video isn't on YouTube, you can upload the video file to your Assets Library instead. Follow the steps above, but leave YouTube URL empty and use Upload video file. Bear in mind:
- The maximum file size is 100MB.
- Voice doesn't re-compress your video into different sizes like YouTube and Vimeo do. We host the file exactly as you upload it, so visitors on a phone or a slow connection get the same full-size file as everyone else. Use MP4/H.264 or WebM, at a sensible resolution, and keep it as small as you can!
- An uploaded video has no thumbnail of its own. Where a YouTube video would show its thumbnail, an uploaded one shows its first frame (in a Filtered Item List or a Related Media Gallery), so a video that starts on a black screen will look blank there. In lists of posts and events it shows nothing at all. It still plays on the page itself, and in the gallery's popup.
You can still use an uploaded video anywhere it shows as a player, and the Insert/edit media button in the editor can insert one into your text. But if you can put it on YouTube instead, it'll look and work better.
A note about privacy
Voice uses YouTube's privacy-enhanced mode for its YouTube players, so YouTube doesn't set cookies until someone plays the video. But showing a YouTube player or thumbnail does still load it from Google's servers, the same as any embedded YouTube video. If your site has a privacy policy, it's worth mentioning that you embed YouTube videos.