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

Open the video

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>
Date modified: