Using Videos


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!

Accessibility and usability for videos



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:

  1. All videos should have captioning
    1. Youtube has a subtitle/captioning tool
  2. Do not enable auto play - this hinders accessibility and it can make your page load slower too. Let users decide whether or not they want to watch a video.
  3. Videos with text (e.g. slideshows in video form, lecture videos, program highlights etc)
    1. For accessibility purposes, captions are an absolute must for users who have visual disabilities and cannot see the text
    2. if captions are absent, these types of videos should be used minimally. Acceptable only if alternative form is given to users, for example a slideshow or content inside video is replicated on the page in actual text.
    3. These are video types are not mobile friendly as they do not translate well on mobile and text can become unreadable for users (especially if placed inside a table or tabs)
  4. Think about placement of videos for mobile/tablet users and preview in mobile before publishing
  5. Do not play videos inside tables/tabs - tables are not very responsive on mobile and causes a horizontal scroll to appear on mobile

Youtube Embeds & 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/...>

 

File types


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.

Optimize your videos 



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

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

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. 

Use recommended video sizes



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.

  • They take longer to load (especially on mobile) and require a higher internet speed. This not only affects your website's performance but also usability for mobile users and people with lower internet speeds. 
  • Large videos do not translate well to mobile and can cause horizontal scroll to appear. Again, effecting usability of your website.
  • If multiple people upload multiple large videos to Sitefinity directly, it can cause the servers to be slow. This could cause more server issues overtime.

Keep in mind, 50MB is the maximum size limit. You should keep your videos as small as possible, since smaller video than the recommended size will load faster.

Other hosting options

Videos bigger than 50MB? We advise you to try hosting your videos in Techsmith Knowmia or Youtube. Both are free and have benefits like:

  • Faster load times since the video will be embedded on the page
  • Auto-captioning for accessibility
  • You can show bigger videos without usability issues
  • Easy to display on your pages using a content block

Techsmith Knowmia 

This is a University owned lecture capture tool used to create and maintain videos for online learning. It can be used to store, organized and host videos. Visit https://ucdenver.techsmithrelay.com/ and login with university credentials.

There are lots of resources to help you get started, including videos on how to upload and share videos and how to add captioning for accessibility.

Check out all of the resources available here!  

YouTube

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!

Upload Videos



To upload videos in Sitefinity, please do the following: 

  1. Go to the Content in your dashboard.
  2. Select Videos.
  3. Click Upload Videos.
  4. Select the video(s) from your computer or drag and drop them from your computer.
  5. Choose the Sitefinity library you would like to store the video(s) in. 
  6. Publish.

Libraries are like folders for your videos and should be used to organize your video content. Learn more about libraries.

Learn how to upload videos into YouTube.

Display Videos



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. 


Youtube

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:

  1. Go to embedresponsively.com and paste your code in one of the applicable source option (in this case YouTube)
  2. Hit Embed and you will be provided with a mobile friendly code
  3. Copy the code and go back to your page in Sitefinity
  4. Drag and drop the content block on your page and click Edit
  5. Click the HTML button in the top right and paste your code
  6. Save your changes

General Recommendations



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 secondsStudent 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. 

Steps to using videos