Video

Video Embeds

When embedding video onto a webpage, the height is statically set, which can lead to empty black bars (wasted space), depending on the device. To get around this wrap the emebd code in a container with a responsive embed class.

Responsive Embed (Current 16:9 Aspect Ratio)  Code

This video was created in the HDTV standard (16:9 aspect ratio). This is the aspect ratio you most often will encounter since it is the current standard. Simply surround the embed code in a container with the .embed-responsive and .embed-responsive-16by9 classes.

Responsive Embed (Analog 4:3 Aspect Ratio)  Code

This video was created in the older analog standard (4:3 aspect ratio). This is the aspect ratio you will occasionally encounter when embedding older videos. Simply surround the embed code in a container with the .embed-responsive and .embed-responsive-16by9 classes.

YouTube Generated Thumbnails

Each YouTube video has a set of automatically generated thumbail images that can be easily referenced. If the video you wish to embed has a poor thumbnail, you can manually select another available thumbnail and link directly to the YouTube video instead of embedding the video directly.

Example of Automatically Generated Thumbnail Set

Name URL Pattern Size Aspect Ratio Example
Each YouTube video has 4 generated images. The first one in the list is a full size image and others are thumbnail images.
Default https://img.youtube.com/vi/video_id_here/0.jpg 480 x 360px 4:3
Thumnail 1 https://img.youtube.com/vi/video_id_here/1.jpg 120 x 90px 4:3
Thumnail 2 https://img.youtube.com/vi/video_id_here/2.jpg 120 x 90px 4:3
Thumnail 3 https://img.youtube.com/vi/video_id_here/3.jpg 120 x 90px 4:3
The default image is also available in a variety of qualities.
Default https://img.youtube.com/vi/video_id_here/default.jpg 120 x 90px 4:3
Default - High Quality https://img.youtube.com/vi/video_id_here/hqdefault.jpg 480 x 360px 4:3
Default - Medium Quality https://img.youtube.com/vi/video_id_here/mqdefault.jpg 320 x 180px 16:9
Default - Standard Definition https://img.youtube.com/vi/video_id_here/sddefault.jpg 640 x 480px 4:3
Default - Maximum Definition https://img.youtube.com/vi/video_id_here/maxresdefault.jpg 1280 x 720px (example sized down to 640 x 360) 16:9
Use Generated Thumbnail with Play Icon  Code

This example uses a generated YouTube thumbnail with a .play-icon class on the anchor (link) element.

play video

HTML5 Video

If you have video assets that do not reside on YouTube, you can add them with HTML5 video.

HTML5 Example  Code

Heros Video Standards

You will need an original video that is 15-30 seconds in length, with no sound. The final videos should be under 5MB in size. You will need to convert the video into both MP4 and WebM video files, along with an image for a thumbnail. You can use online file converting services like CloudConvert to convert the files. Here are settings they may need adjustment:

Convert Original Video to MP4
  • Video Codec: H264
  • Video Constant Quality (CRF): Adjust this only if the video still exceeds 5MB. Otherwise, leave this alone.
  • Audio Codec: none (remove audio track)
Convert Original Video to WebM
  • Video Codec: VP8
  • Video Constant Quality (CQ): Adjust this only if the video still exceeds 5MB. Otherwise, leave this alone.
  • Audio Codec: none (remove audio track)

Video Gallery  Head Code  Body Code

This video gallery includes a single YouTube embed and a carousel of video thumbs that link to the player.

How it Works

Scrolling Effect

A <section> with a id="video-container" attribute contains the video player. This id is the point that the page scrolls to when a video thumbnail is clicked.

  • Video thumbnail links include the attributes class="video-scroll" data-scroll="video-container", which allows the page to scroll to the top of the section once the link has been activated.
Video Player

A standard YouTube embed is used as the video player. A name="youtube-player" attribute is added, allowing the new video urls to be targeted to video embed <iframe>.

  • Update the name attribute value to something more unique (e.g. name="youtube-player-139040").
  • Update the 11-character YouTube video-id in the src="" attribute in the <iframe> with your video id - typically the id of the first video in your list.
Video Thumbnail Carousel

JCarousel is used for the video thumb items. A minimum of four items are required. If you have less, you do not have to use the carousel to lay out the thumbnails.

  • Update the 11-character video-id in the href="" attribute in the <a> tag for each thumb item.
  • Update the target="youtube-player" attribute in the <a> tag for each thumb item with the unique name you chose for your player (e.g. target="youtube-player-139040").
  • Update the 11-character video-id in the src="" attribute in the <img> tag for each thumb item.