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

In this article

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.


Current versions of our themes allow you to enable this video player with a single click using theme settings.

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

<script type="text/javascript" src=""></script>


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.

  • <div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
    <script type="text/javascript">
      ready(function() {
  • <div class="plyr" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
    <script type="text/javascript">
      ready(function() {

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 />