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.
-
-
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div> <script type="text/javascript"> ready(function() { Plyr.setup('.plyr'); }); </script>
-
-
<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>