1. Home
  2. Documents
  3. For Content Editors
  4. Videos
Book: For Content Editors
Last Updated: 06/05/2024 - 14:28

Videos

For video content, the Web Theme offers three ways to embed content. Our demo site page shows all three examples of video content in action.

 

Hero Videos

In the Hero section on the Edit page, MP4 videos can be embedded using the 'source' button. This embed field consists of a text area that only accepts raw HTML. For content editors, consider copying and pasting this code below from the dummy page on your Web Theme site and change the file path to match yours. If this page doesn't exist or was deleted, please contact us or your dep't site administrator for assistance.

hero video example

Example video embed for MP4 with the size 1883x672 pixels.

  1. Upload the video to the server first. This can be done by going inside a column and uploading the video the same way you would add an image in the editor toolbar. 
  2. Copy the url of the video file prior to exiting the media upload window. The url of the file is also accessible under the 'Files' or 'Media' tab from the Content page. In the example above, all we need is the url path that appears after the domain (/sites/default/files/2021-10/Campus-Experience.mp4).
  3. In the Hero Video field, enter the HTML video code and replace the url's.
  4. In the example above, we also used the HTML attributes autoplay and loop. This means, upon page load, the video will autoplay and will loop an infinite amount of times. If either of these features are not desired, consider not adding them. Explore other HTML video attributes.
  5. For videos used at the top in a hero capacity, they must be optimized and be small in file size (as much as possible) so they load quickly.

 

Single Video Embed

Embed a YouTube video inside a blade easily and it will look perfect in both mobile and desktop views. 

how to embed url example

 

  1. Go to a basic page, and select "Add Blade"
  2. From within the blade, go to the Body inside of the first column and select the 'Video Embed' icon. A new window will appear.
  3. Enter the URL retrieved from YouTube and paste it in. Leave the two boxes checked.
  4. Save. The video thumbnail should display inside the Body field.
  5. Select the desired width (we recommend 4-7) for the column and save the page.

toolbar example with videos

 

If you don't see the 'Video Embed' icon available for your Basic Page, please contact us or your site admin for assistance.

 

Video Gallery

Our fully responsive gallery supports more than one YouTube video (ideally 3-6) and is a great option for showcasing a group of similar videos or a group of videos that support an event or series.

 

gallery demo image

Screenshot of video gallery from our Demo Site

 

The features of our gallery module include:

Default Video Image
A static image that represents or ties together the entire gallery's theme. Upon page load, this image will feature prominently.
 
Default Video Description
A brief description (2-3 sentences) that provides context for the visitor about what the gallery is featuring. Think of this as a place to entice the visitor to click or tap on a thumbnail to watch a video.
 
Video Upload
Each video in the series gets uploaded with a Name, Title/Author, Description, and Video ID. Just like the Default Video Description, we recommend entering a description per video as well. This will enhance the user experience.
 
  1. To add a gallery, go to a basic page and open a new blade.
  2. In the column dropdown, select YouTube Video Gallery

select gallery example

  1. Enter a default video image and video description for the entire gallery.
  2. For the first video - enter the the Name, Title, Description, and Video ID.
  3. Select 'Add YouTube Video' and add another. We recommend 3-6 per gallery.
  4. Save the page and view the newly created gallery!

 

If you do not see YouTube Gallery available under the Column dropdown, go to Extend > search for 'youtube' > check the box next to the gallery > Save.