To insert a video from a file from the Filelist storage area or another Web server into a page,
- Insert a content element as normal, choosing the content type Special elements > Media
- In the Media tab > Media Options tab, check the HTML5 / accessible rendering checkbox and click OK to reload the form
- In the Video Element tab, either paste the fallback video source URL into the field (if the media is on another server) or use the button to browse to the file.
The fallback video source is what will be used if the visitor's computer/browser is not compatible with any of the video formats you reference in the next step.
- In the HTML5 Additions tab, click Add new under Video sources for HTML5 <video> element to add the first video format and enter the Path or URL to the video file either by copy-pasting the URL into the field, or using the button to browse to the file. Repeat this step for each video format you have available
- Enter a Path or URL to captions file (NOTE that this file must be available under www.ndsu.edu . It does not matter whether the file is hosted from the CMS filesystem or another www.ndsu.edu web server, though you will not be able to preview captions before publishing the content element if you enter a full URL, such as www.ndsu.edu/.... here).
The file should be in WebVTT format. Microsoft has a builder that can help you get started on the file.
When creating captions, best practice is to follow standard caption formatting techniques.
- Enter audio description for videos.
What is this? This is a text description of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or multi-tasking. Descriptions are read by a screen reader or turned into a separate audio track. This could be a .mp3-format audio track.
After you complete the above basic configuration (additional configuration described below), the tabs should look something like the following, with some variation depending on where your files will be hosted, how many file formats you have available, etc.
Not all Internet browsers will display media types in the same manner, and some visitors might not have the plug-ins needed to display the embedded file.
You can add further configuration to the media element.
Media Width / Media Height (pixels)
Define the size of the video displayed in the page. For the best experience for visitors watching the video, it is best to use either the original size at which the video was created or whole-number multiples of that size. For example, if the video is 320x240px,640x480px is a better choice than 700x525px. This is because the math to evenly multiply pixels by 1, 2, etc. is less computationally-difficult than fractions (the same as you'll have an easier time multiplying something by 2 in your head than by multiplying by 1.78643, older and lower-end video cards have an "easier" time with simpler math). Note that the space available in the page is limited to 700px wide on desktop, or the width of the device screen for mobile devices.
Media Parameter > Option AutoPlay
If you Add new Media Parameter with the Option AutoPlay, the video will automatically begin playback as soon as the page is loaded. Keep in mind that this behavior can be frustrating for the visitor if they aren't expecting noise to start coming from their computer, or make the page unusable for visitors using a screen reader. Autoplay is generally a bad idea, but if you must do it or are using it on a page where it's clear that video playback will begin, this is how.
Media from other video providers
You can embed videos from some online video providers, such as Youtube and Vimeo, using the Multimedia content element. The ones we have tried are listed here, but with some trial-and-error you should be able to figure out the URLs from other video providers that allow embedding, too.
Embed a Youtube video
You can embed many Youtube videos. Here's how:
Using Chrome or Internet Explorer/Edge (Firefox does not save the video correctly):
- On the Youtube page for the video, select the entire URL displayed in your browser address bar. The URL looks something like "https://www.youtube.com/watch?v=ZWJzethDeMs"
- Paste the URL into the Media > Video Element > Path or URL [...] field in the media content element
- Optionally set a Media Width and/or Media Height in the Media Options tab
- Verify that other options are left as default (Media Type = Video, HTML5 / accessible rendering = unchecked, Render Type = auto
- Save and publish as usual
Note that some Youtube video authors have disabled embedding their video. In that case, you will not be able to embed the Youtube video into any webpage. Instead you can link to the video on Youtube.
Embed a Vimeo video
You cam embed Vimeo videos. Getting the URL for embedding a Vimeo video is a little tricky. Here's how
- On the Vimeo page for the video, click the Embed button
- (This is the tricky part) copy and paste the player.vimeo.com URL from the Get the embed code textarea, it looks something like: http://player.vimeo.com/video/2187138 (you can skip everything after the ?). The trick is that you must Ctrl - c to copy before letting go of your mouse button from selecting the URL because the entire contents of the text area will be selected if you don't, and you'll copy too much.
If you struggle to get just the URL, you can try copy-pasting the entire embed code into Notepad or Word, and then select just the URL from there to copy.
- Paste the player.vimeo URL into the Path or URL field in the media content element. If you see anything other than the http://player.vimeo... URL when you paste (if you see <iframe or <p) you should go back to step 2 and paste just the URL into the Path or URL field
- Uncheck the Use Player checkbox
- Save and publish as usual