---
{
	"title": "Multimedia Player - YouTube",
	"language": "en",
	"category": "Plugins",
	"description": "Provides an accessible multimedia player for embedding YouTube video into web pages.",
	"tag": "multimedia, youtube",
	"parentdir": "multimedia",
	"altLangPrefix": "multimedia-youtube",
	"dateModified": "2014-08-01"
}
---
<span class="wb-prettify all-pre hide"></span>

<div class="row">
	<section class="col-md-12">
		<h2>Overview</h2>
		<p>For YouTube videos, the multimedia player integrates the YouTube chromeless player which leverages the native HTML5 <code>video</code> tag.</p>
		<p>The multimedia player's timeline relies on the HTML5 <code>progress</code> element and uses a polyfill when the element is not supported.</p>
	</section>
</div>

<div class="row">
	<section class="col-md-6">
		<h2>Example</h2>
		<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="http://healthycanadians.gc.ca/video/suspect-eng.php#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>View code</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'&gt;
	&lt;video title=&quot;Suspect&quot;&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=9znKJqnFuuY&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Suspect&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
		</details>
	</section>
</div>

<h2>Youtube video in a lightbox</h2>

<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="http://healthycanadians.gc.ca/video/suspect-eng.php#trans">Transcript</a>)</p>
			</figcaption>
		</figure>
	</div>
</section>

<details>
	<summary>View code</summary>
	<pre><code>&lt;p&gt;&lt;a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube"&gt;Open the video&lt;/a&gt;&lt;/p&gt;
&lt;section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def"&gt;
	&lt;header class="modal-header"&gt;
		&lt;h3&gt;Youtube video in a lightbox&lt;/h3&gt;
	&lt;/header&gt;
	&lt;div class="modal-body"&gt;
		&lt;figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=9znKJqnFuuY"}'&gt;
			&lt;video title="Suspect"&gt;
				&lt;source type="video/youtube" src="https://www.youtube.com/watch?v=9znKJqnFuuY" /&gt;
			&lt;/video&gt;
			&lt;figcaption&gt;
				&lt;p&gt;Suspect (&lt;a href="http://healthycanadians.gc.ca/video/suspect-eng.php#trans"&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
			&lt;/figcaption&gt;
		&lt;/figure&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
</details>