Skip to content

Main Navigation

Version 3.1: Responsive Video

What is a responsive video?

Videos are not responsive by default. The responsive video snippet allows video/audio to be responsive and formatted correctly across all screens (e.g. smart phones, desktops, tablets, etc.). This snippet is compatible with:

  • YouTube
  • Vimeo
  • MediaSpace.utah.edu


See hosting options for how to upload to each platform.

Example of Responsive Video Snippet

Creating a responsive video

Step 1:

On the page you're editing, click on the Snippets icon in the WYSIWYG Toolbar.

Step 2:

Select Video - Responsive and click Insert.

Step 3:

Delete the default text in the upper cell of the snippet.

Step 4:

Place your curser in the upper cell and click on Insert/Edit Media.

Step 5A: 

If you are linking from an external host, Copy and paste the URL of the video/audio. Resize if needed.
Click Save.

Step 5B:

If you have uploaded your video, browse for the video within the site. Resize if needed. Click Save.

Step 5C:

If you are using an embedded code, click Embed and then copy and paste the code. Resize if needed and then click Save.

Step 6:

Optional: Add text below the video.

Step 7:

Click Save to view changes.

Ways to style a video

Add classes in the table properties of the video to create different styles. These can be used in combination or on their own.

Resources


Video Tutorials

(COMING SOON)


Layout Examples Library

(COMING SOON)

Last Updated: 3/1/22