Website Training

Hero Images and Video

Basic steps for video:

1: Create the video with a resolution of 1920x780

2: Export it as an MP4

3: Upload the video by going to the content, which lists all the pages, and choosing the media tab

once in the media tab, just add media, then choose video and 'Choose File' to locate the video

4: Copy the URL of the video file before exiting the media upload window. We only need the URL path that appears after the domain (/sites/default/files/2021-10/Campus-Experience.mp4).

5: In the Hero Video field, enter the HTML code below and replace the URL in the src= "...".

 

(copy and paste the following)

<video autoplay loop>
 <source src="/sites/default/files/videos/Campbell%20Hall%20Hero_2.mp4">
Your browser does not support the video tag.
</video>

 

 

Below is from the Web Theme User guide.

Hero Images

Hero Images are always positioned at the top of the page and allow site builders to add full-width images with text across the top of your home page or landing pages. For the 'Hero' tab, we also provide the ability to enter a video file or have a block of text overlay an image with our Hero Overlay feature.  

We do not allow any size hero image to be uploaded to the site (rather, you can upload it but it will not display) until the correct image dimensions are met.

Sizes for full-width Hero images

  • Tier 1 Crop to 3360 wide by 1920px high 
    • Suitable for home page only
  • Tier 2 Crop to 3360 wide by 1200px high 
    • Suitable for landing pages or home pages
  • Tier 3 Crop to 3360 wide by 960px high  
    • Suitable for interior pages

Tips

  • You don't have to use the Hero Image hero to make hero-like content.  Consider making a blade act as a hero and more options can present themselves on how you want to capture your audience the second the page loads.  
  • Large (high resolution) images may cause performance issues and could possibly cause other site errors. If you are uploading your own photos to use for Hero Images, try to only upload photos that have a file size of 1MB or smaller.
  • For easy handling when using one of the 3 tiers for your site's hero images, we highly recommend using our Photoshop Templates on Box.
  • Interested in displaying a video instead? Checkout the Videos documentation.

 

 

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.