We get a lot of questions about how to use videos on the web. What size they should be? Where to host them? We have a few general recommendations and some tools to help you out!
Like with all the content on your website, accessibility and usability is very important. It ensures that all users, including those with disabilities can access your content. There are a few things to keep in mind for accessible videos:
Media player controls should receive focus using the Tab key and arrow keys. Depending on the control, the media player should be operated using the Enter key, space bar, and arrow keys. Check for the following to determine keyboard accessibility:
YouTube embeds use an iframe to display the video. Since videos are considered a visually distinctive content, they must have a title. Siteimprove and other accessibility checkers will mark your YouTube video's as inaccessible if a title is missing. The title should be short and descriptive, telling screen reader users what the video is displaying. To add a title to your Youtube iframe embed:
Locate the embed code and add title right after "iframe" like so:
<iframe title="short & descriptive title about video" width="560" height="315" src="https://www.youtube.com/embed/...>
Sitefinity accepts the following file types: .mp4, .webm, .ogv. Keep in mind, .mp4 is the best format because it can pack high quality into small file size.
When optimizing videos, the goal is to make the video as small as possible in file weight, while sacrificing as little playback quality as possible. Optimized videos equate to better website speed and performance. There are two main tools we currently recommend.
Converterpoint is a free tool. It is fast and easy to use. Because it auto optimizes, it is suitable for those who are not familiar with video editing.
Handbrake is also free. It is more suitable for people who know specifically what they want to accomplish and are also familiar with video editing.
The recommendation for video size in Sitefinity is 50MB or less. You will receive an error when trying to upload if your videos are larger. We do not allow large video file uploads in Sitefinity for a few reasons.
Keep in mind, 50MB is the maximum size limit. You should keep your videos as small as possible, since videos smaller than the recommended size will load faster.
Videos bigger than 50MB? We advise you to try hosting your videos in Panopto or Youtube. Both have benefits like:
Panopto is the enterprise solution for creating and hosting videos at CU Denver and CU Anschutz. Visit http://ucdenver.hosted.panopto.com/ and login with university credentials.The following training resources are available from Panopto:
You can learn more about Panopto here.
This is video hosting and social media platform available to university and non-university users. You can host your own original content by uploading your videos to you or your department's own Youtube channel. Learn how to create a YouTube channel and upload content!
To upload videos in Sitefinity, please do the following:
Libraries are like folders for your videos and should be used to organize your video content. Learn more about libraries.
Once your video(s) are uploaded, you are ready to use them on your pages! In order to display them, open the page in edit mode and choose the media widget you would like to use. If you are not sure which widget to use, the video widget is a good place to start.
If you are using a YouTube video, you should use a content block to display your video but first you'll need the embed code from your video. Find your video in Youtube and select the option to share and copy the embed code.
Before you use the code in Sitefinity, you'll want to be sure your video is fully responsive for mobile display. To do this:
Ask yourself: Do I really need to use this video?
Many times, it might seem like a great idea to create videos for everything in order to save on space, but it can be overwhelming to users to see a page full of videos that cover a variety of different topics (e.g. videos on program overview, welcome video, faculty/staff videos, etc all on one page). Be strategic about which videos you choose to create and how you choose to display them to your site visitors. Also, remember that many videos on a single page could also cause the page and/or videos to load slowly.
Another thing to think about is if you can keep the viewers attention with the video.
A video is only helpful if users watch it. To catch viewers attention, present important details during the initial 30 seconds of the video. Statistics have shown that 33% of viewers lose interest after the first 30 seconds. Student engagement videos should be no longer than 6 minutes as engagement decreases as video lengthens. Informational videos should be anywhere from 30 seconds to 60 seconds; anything longer than 3 minutes and your audience will start losing interest.