---
{
	"title": "Lecteur multimédia - YouTube",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un lecteur multimédia accessible permettant d'intégrer des contenus vidéo de YouTube sur les pages Web.",
	"tag": "multimedia, youtube",
	"parentdir": "multimedia",
	"altLangPrefix": "multimedia-youtube",
	"dateModified": "2014-08-01"
}
---
<span class="wb-prettify all-pre hide"></span>

<div class="row">
	<div class="col-md-12">
		<p>Pour les vidéos YouTube, le lecteur multimédia s'appuie le lecteur sans interface de YouTube qui s'appuie sur la balise «&#160;<code>video</code>&#160;» HTML5 natif.</p>
		<p>Le scénario du lecteur multimédia repose sur l'élément «&#160;<code>progress</code>&#160;» HTML5 et utilise un polyfill lorsque l'élément n'est pas pris en charge.</p>
	</div>
</div>

<div class="row">
	<section class="col-md-6">
		<h2>Exemple</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
			<video title="Suspect">
				<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans">Transcription</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>Code source</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'&gt;
	&lt;video title=&quot;Suspect&quot;&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=LLg-UsTr7us&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>
	<section class="col-md-6">
		<h2>Exemple en sourdine</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
			<video title="Suspect" muted>
				<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans">Transcript</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>Code source</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'&gt;
	&lt;video title=&quot;Suspect&quot; muted&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=LLg-UsTr7us&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>

<div class="row">
	<section class="col-md-6">
		<h2>Exemple avec bouton plein écran</h2>
		<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
			<video title="Suspect">
				<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
			</video>
			<figcaption>
				<p>Suspect (<a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans">Transcription</a>)</p>
			</figcaption>
		</figure>

		<details class="mrgn-tp-md">
			<summary>Code source</summary>
			<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'&gt;
	&lt;video title=&quot;Suspect&quot;&gt;
		&lt;source type=&quot;video/youtube&quot; src=&quot;https://www.youtube.com/watch?v=LLg-UsTr7us&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>
	<section class="col-md-6">
		<h2>Vidéo Youtube dans une fenêtre modale (lightbox)</h2>
		<p><a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube">Ouvrir le vidéo</a></p>
		<section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def">
			<header class="modal-header">
				<h3>Vidéo Youtube dans une fenêtre modale (lightbox)</h3>
			</header>
			<div class="modal-body">
				<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
					<video title="Suspect">
						<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
					</video>
					<figcaption>
						<p>Suspect (<a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans">Transcription</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;Ouvrir le vidéo&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;Vidéo Youtube dans une fenêtre modale (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=LLg-UsTr7us"}'&gt;
					&lt;video title="Suspect"&gt;
						&lt;source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" /&gt;
					&lt;/video&gt;
					&lt;figcaption&gt;
						&lt;p&gt;Suspect (&lt;a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans"&gt;Transcription&lt;/a&gt;)&lt;/p&gt;
					&lt;/figcaption&gt;
				&lt;/figure&gt;
			&lt;/div&gt;
		&lt;/section&gt;</code></pre>
		</details>
	</section>
</div>
