Lecteur multimédia - YouTube

Pour les vidéos YouTube, le lecteur multimédia s'appuie le lecteur sans interface de YouTube qui s'appuie sur la balise « video » HTML5 natif.

Le scénario du lecteur multimédia repose sur l'élément « progress » HTML5 et utilise un polyfill lorsque l'élément n'est pas pris en charge.

Exemple

Suspect (Transcription)

View code
<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://www.youtube.com/watch?v=LLg-UsTr7us"}'>
	<video title="Suspect">
		<source type="video/youtube" src="http://www.youtube.com/watch?v=LLg-UsTr7us" />
	</video>
	<figcaption>
		<p>Suspect</p>
	</figcaption>
</figure>

Vidéo Youtube dans une fenêtre modale (lightbox)

Ouvrir le vidéo

View code
<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": "http://www.youtube.com/watch?v=LLg-UsTr7us"}'>
			<video title="Suspect">
				<source type="video/youtube" src="http://www.youtube.com/watch?v=LLg-UsTr7us" />
			</video>
			<figcaption>
				<p>Suspect (<a href="http://canadiensensante.gc.ca/video/suspect-fra.php#trans">Transcription</a>)</p>
			</figcaption>
		</figure>
	</div>
</section>
Date de modification :