# Multimedia Player - YouTube

- Documentation
- Questions or comments?

## 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": "http://www.youtube.com/watch?v=9znKJqnFuuY"}'>
    	<video title="Suspect">
    		<source type="video/youtube" src="http://www.youtube.com/watch?v=9znKJqnFuuY" />
    	</video>
    	<figcaption>
    		<p>Suspect</p>
    	</figcaption>
    </figure>

## Youtube video in a lightbox

Open the video

### Youtube video in a lightbox

Suspect (Transcript)

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": "http://www.youtube.com/watch?v=9znKJqnFuuY"}'>
    			<video title="Suspect">
    				<source type="video/youtube" src="http://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>

Date modified:
  2014-08-01