Sections

Core concepts

Setup

Base styles

Plugins

Videos

Present YouTube, Vimeo and HTML5 videos to your visitors quickly and easily.

Our themes fully support the Plyr plugin, which offers an enhanced YouTube, Vimeo or HTML 5 video experience.

You can also use native embeds without the use of a plugin. Use .ratio to control the aspect ratio of the video.

Installation

Update the document_head.hbs template to include a <script> tag referencing the Plyr JavaScript package:

<script type="text/javascript" src="https://unpkg.com/plyr@~3.5.6/dist/plyr.polyfilled.min.js"></script>

Usage

The Plyr plugin can be initialized using JavaScript by passing a selector. For example, if .plyr is used on your videos Plyr.setup('.plyr') should be added to your script.js file.

The HTML to be added to your page templates depends on the video provider you’re using.

YouTube and Vimeo

Use the data-plyr-provider attribute to identify which video provided is being used and the data-plyr-embed-id to specify the video ID.

YouTube video 
  • <div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

<script type="text/javascript">
  ready(function() {
    Plyr.setup('.plyr');
  });
</script>
Vimeo video 
  • <div class="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>

<script type="text/javascript">
  ready(function() {
    Plyr.setup('.plyr');
  });
</script>

HTML 5 video (self-hosted)

For self-hosted videos, the <video> element should be used. For example:

<video class="plyr" poster="/path/to/poster.jpg" playsinline controls>
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>