Multimedia Player - YouTube
Overview
For YouTube videos, the multimedia player integrates the YouTube chromeless player which leverages the native HTML5 video tag.
The multimedia player's timeline relies on the HTML5 progress element and uses a polyfill when the element is not supported.
Example
Suspect (Transcript)
View code
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
<video title="Suspect">
<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect</p>
</figcaption>
</figure>Muted example
Suspect (Transcript)
View code
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
<video title="Suspect" muted>
<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect</p>
</figcaption>
</figure>Example with fullscreen button
Suspect (Transcript)
View code
<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
<video title="Suspect">
<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect</p>
</figcaption>
</figure>Youtube video in a lightbox
View code
<p><a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube">Open the video</a></p>
<section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def">
<header class="modal-header">
<h3>Youtube video in a lightbox</h3>
</header>
<div class="modal-body">
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'>
<video title="Suspect">
<source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" />
</video>
<figcaption>
<p>Suspect (<a href="https://www.canada.ca/en/health-canada/services/video/suspect.html#trans">Transcript</a>)</p>
</figcaption>
</figure>
</div>
</section>Page details
- Date modified: