Video page header

If wish to use a video hero in place of the embedded image or call to action component on a page:

1. Drag and drop a HTML component below the empty embedded Image or Call to Action component
2. Click on the html component to open its toolbar
3. Click the wrench icon in the toolbar
4. Click in the CSS Class field and type: vt-vidHeader
5. Click In the HTML field and paste the code snippet below
6. Select the videoSource link text between the quotes and replace with the path to your video in the site's assets folder, e.g., /content/dam/sitename_vt_edu/video.mp4
7. Select the videoHeader text between the quotes and replace with your text header
   NOTE - If this option is skipped the video will appear without a heading overlay
8. Select the videoCaption text between the quotes and replace with your text caption
   NOTE - If this option is skipped the video will appear without a caption below the heading overlay
9. Check to make sure the items above are contained in quotes ("") and add if necessary
10. Click the checkmark in the top-right of the dialog to accept the changes

<!-- copy everything below -->

<script>

var videoSource = "/content/dam/path/to/your/video.mp4",

   videoPoster = "/content/dam/alumni_vt_edu/video/helmet-research-poster.jpg",

   videoHeader = "",

   videoCaption = "";

</script>

<video playsinline="" autoplay="" loop="" id="vt_bgVid" muted="">

</video>

<button class="vt-vidPlayPause vt-pauseButton" onclick="javascript:playPause()"><span class="vt-playPause-text sr-only">Pause button</span></button>

<div class="vt-vid-overlay-column">

 <div class="vt-vid-overlay-row">

   <div class="vt-vid-overlay">

       <span class="vt-vid-header"></span>

       <p class="vt-vid-subhead"></p>

   </div>

 </div>

</div>

<!-- copy everything above -->

Utility classes for vt-vidHeader:

•   vt-overlay-light -> all text colors become white
•   vt-overlay-dark -> all text colors become black

...then there are nine positions (top, middle, bottom, left, right) that are represented:

•   vt-overlay-topLeft
•   vt-overlay-topRight
•   vt-overlay-middleLeft
•   vt-overlay-middleRight
•   vt-overlay-bottomLeft
•   vt-overlay-bottomRight

...example usage in "CSS class" field of HTML component configuration dialog:

vt-vidHeader vt-overlay-dark vt-overlay-bottomLeft