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

<div class="row">
	<section class="col-md-12">
		<h2>Overview</h2>
		<p>For video, the multimedia player leverages the native HTML5 <code>video</code> tag. The MPEG 4 format (H264 codec) is the minimum requirement for video because it is the standard video format on many browsers. An optional but highly recommended format, Webm (VP8 codec), should be added as well to allow some browsers such as Firefox that do not include native support for H264 to leverage the native HTML5 performance gains.</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>

<section>
	<div class="row">
		<div class="col-md-12">
			<h2>Examples</h2>
			<p>All video examples use native HTML5 video on most modern browsers including Firefox 6+, Google Chrome 3+ and Edge.</p>
		</div>
	</div>

	<div class="row">
		<section class="col-md-6">
			<h3>MPEG4 (H264 + AAC) and WebM (VP8) source with HTML captions</h3>
			<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
				<video poster="demo/video1-en.jpg" title="Looking for a Job">
					<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
					<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
					<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
				</video>
				<figcaption>
					<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
				</figcaption>
			</figure>

			<details class="mrgn-tp-md mrgn-bttm-lg">
				<summary>View code</summary>
				<section>
					<h4>In-page HTML</h4>
					<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{&quot;shareUrl&quot;: &quot;https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html&quot;}'&gt;
	&lt;video poster=&quot;demo/video1-en.jpg&quot; title=&quot;Looking for a Job&quot;&gt;
		&lt;source type=&quot;video/webm&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm&quot; /&gt;
		&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4&quot; /&gt;
		&lt;track src=&quot;cpts-lg-en.html&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Looking for a Job (&lt;a href=&quot;cpts-lg-en.html&quot;&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
				</section>

				<section>
					<h4>cpts-lg-en.html</h4>
					<pre><code>&lt;div id=&quot;inline-captions&quot;&gt;
	&lt;section&gt;
		&lt;h2&gt;Transcript&lt;/h2&gt;
		&lt;p class=&quot;wb-vd&quot;&gt;&lt;strong&gt;(Animated pen draws a red line that leads into the text Looking for A Job)&lt;/strong&gt;&lt;/p&gt;
		&lt;p class=&quot;wb-vd&quot;&gt;&lt;strong&gt;(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)&lt;/strong&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span class=&quot;wb-tmtxt&quot; data-begin=&quot;2.50s&quot; data-dur=&quot;3.84s&quot;&gt;Hi, my name is Eric, and I&amp;#39;m a Service Canada employee.&lt;/span&gt;&lt;/p&gt;
		...
	&lt;/section&gt;
&lt;/div&gt;</code></pre>
				</section>
			</details>
		</section>

		<section class="col-md-6">
			<h3>MPEG4 (H264 + AAC) and WebM (VP8) source with TTML captions</h3>
			<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
				<video poster="demo/video2-en.jpg" title="Training and Development">
					<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm" />
					<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4" />
					<track src="demo/video2-captions-en.xml" kind="captions" data-type="application/ttml+xml" srclang="en" label="English" />
				</video>
				<figcaption>
					<p>Training and Development (<a href="cpts-lg2-en.html">Transcript</a>)</p>
				</figcaption>
			</figure>

			<details class="mrgn-tp-md mrgn-bttm-lg">
				<summary>View code</summary>
				<section>
					<h4>In-page HTML</h4>
					<pre><code>&lt;figure class=&quot;wb-mltmd&quot; data-wb-mltmd='{&quot;shareUrl&quot;: &quot;https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html&quot;}'&gt;
	&lt;video poster=&quot;demo/video2-en.jpg&quot; title=&quot;Training and Development&quot;&gt;
		&lt;source type=&quot;video/webm&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.webm&quot; /&gt;
		&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video2-en.mp4&quot; /&gt;
		&lt;track src=&quot;demo/video2-captions-en.xml&quot; kind=&quot;captions&quot; data-type=&quot;application/ttml+xml&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Training and Development (&lt;a href=&quot;cpts-lg2-en.html&quot;&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
				</section>

				<section>
					<h4>video2-captions-en.xml</h4>
					<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;tt xml:lang=&quot;en&quot; xmlns=&quot;http://www.w3.org/2006/10/ttaf1&quot; xmlns:tts=&quot;http://www.w3.org/2006/10/ttaf1#style&quot;&gt;
	&lt;head&gt;
		&lt;styling&gt;
			&lt;style id=&quot;defaultSpeaker&quot; tts:fontSize=&quot;12&quot; tts:fontFamily=&quot;Arial&quot; tts:fontWeight=&quot;normal&quot; tts:fontStyle=&quot;normal&quot; tts:textDecoration=&quot;none&quot; tts:color=&quot;white&quot; tts:backgroundColor=&quot;black&quot; tts:textAlign=&quot;center&quot;/&gt;
			&lt;style id=&quot;defaultCaption&quot; tts:fontSize=&quot;12&quot; tts:fontFamily=&quot;Arial&quot; tts:fontWeight=&quot;normal&quot; tts:fontStyle=&quot;normal&quot; tts:textDecoration=&quot;none&quot; tts:color=&quot;white&quot; tts:backgroundColor=&quot;black&quot; tts:textAlign=&quot;center&quot;/&gt;
		&lt;/styling&gt;
	&lt;/head&gt;
	&lt;body style=&quot;defaultCaption&quot; id=&quot;thebody&quot; xml:id=&quot;b1&quot;&gt;
		&lt;div begin=&quot;1.40s&quot; dur=&quot;3.33s&quot;&gt;Hi, my name is Eric, and I'm a Service Canada employee.&lt;/div&gt;
		...
	&lt;/body&gt;
&lt;/tt&gt;</code></pre>
				</section>
			</details>
		</section>
	</div>

	<div class="row">
		<section class="col-md-6">
			<h3>Muted MPEG4 (H264 + AAC) source with inline HTML captions</h3>
			<p>This example illustrates the use of an inline transcript to provide captions. This example can also demonstrate the fallback mechanism in Web browsers that don't support HTML5 videos.</p>
			<figure class="wb-mltmd">
				<video poster="demo/video1-en.jpg" title="Looking for a Job" muted>
					<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
					<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="English" />
				</video>
				<figcaption>
					<details id="inline-captions">
						<summary>Looking for a Job - HTML5 Transcript/Captions</summary>
						<p class="wet-boew-vd"><strong>(Animated pen draws a red line that leads into the text Looking for A Job)</strong></p>
						<p class="wet-boew-vd"><strong>(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="2.50s" data-dur="3.84s">Hi, my name is Eric, and I&#39;m a Service Canada employee.</span></p>
						<p><span class="wb-tmtxt" data-begin="6.34s" data-dur="1.87s">You may have heard the old saying that, </span>
						<span class="wb-tmtxt" data-begin="8.21s" data-dur="1.84s">when you&#39;re out of work, finding a job is your </span>
						<span class="wb-tmtxt" data-begin="10.04s" data-dur="1.70s">full-time occupation.</span></p>
						<p class="wet-boew-vd"><strong>(LINE DRAWING GRAPHIC: Stick person walks to right side of screen. Screenshot of job bank website appears in animated computer screen.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="11.75s" data-dur="2.40s">Well, there&#39;s a lot of truth to that:</span></p>
						<p><span class="wb-tmtxt" data-begin="14.15s" data-dur="2.57s">finding a job does take time… and effort.</span></p>
						<p class="wet-boew-vd"><strong>(LINE DRAWING GRAPHIC: Stick person rests head against computer screen in discouragement. But then perks-up.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="16.72s" data-dur="1.40s">But don&#39;t get discouraged.</span></p>
						<p><span class="wb-tmtxt" data-begin="18.12s" data-dur="1.90s">There are a number of online tools and programs available </span>
						<span class="wb-tmtxt" data-begin="20.02s" data-dur="1.94s">to help you find a job.</span></p>
						<p class="wet-boew-vd"><strong>(Close-up of the Host.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="21.96s" data-dur="2.30s">No matter what you&#39;re looking for there are many Web sites </span>
						<span class="wb-tmtxt" data-begin="24.26s" data-dur="2.37s">where employers post job notices looking for people </span>
						<span class="wb-tmtxt" data-begin="26.63s" data-dur="1.90s">to fill vacant positions.</span></p>
						<p class="wet-boew-vd"><strong>(Job Bank website reappears.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="28.53s" data-dur="2.34s">One of these sites is called Job Bank.</span></p>
						<p><span class="wb-tmtxt" data-begin="30.86s" data-dur="2.17s">It&#39;s updated every day, and lists job opportunities </span>
						<span class="wb-tmtxt" data-begin="33.03s" data-dur="2.17s">that are available across the country.</span></p>
						<p class="wet-boew-vd"><strong>(Close-up of the screen. Stick person’s profile. Words “Updated Daily and “48 Hours” appear on screen.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="35.20s" data-dur="2.30s">Since the job ads on Job Bank are updated daily, </span>
						<span class="wb-tmtxt" data-begin="37.50s" data-dur="2.20s">you should check them regularly.</span></p>
						<p><span class="wb-tmtxt" data-begin="39.71s" data-dur="3.57s">And, you can search for jobs posted in the last 48 hours.</span></p>
						<p class="wet-boew-vd"><strong>(Words “Advertise your Skills” and “Email your matches” appear on screen.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="43.28s" data-dur="2.40s">On Job Bank you can also advertise your skills, </span>
						<span class="wb-tmtxt" data-begin="45.68s" data-dur="2.57s">and even ask them to send you e-mails when jobs </span>
						<span class="wb-tmtxt" data-begin="48.25s" data-dur="2.34s">that match your search criteria are posted.</span></p>
						<p class="wet-boew-vd"><strong>(Close-up of the Host. LINE DRAWING GRAPHIC: of the Parliament Building. The web address jobs.gc.ca appears in large letters on the front lawn, stick person points to words.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="50.58s" data-dur="1.80s">If you&#39;re thinking about working in the public sector, </span>
						<span class="wb-tmtxt" data-begin="52.39s" data-dur="2.70s">jobs.gc.ca is the official Web site </span>
						<span class="wb-tmtxt" data-begin="55.09s" data-dur="2.90s">for Government of Canada listings open to the public.</span></p>
						<p><span class="wb-tmtxt" data-begin="57.99s" data-dur="1.57s">Keep in mind, that some departments, </span>
						<span class="wb-tmtxt" data-begin="59.56s" data-dur="2.50s">like the Canada Revenue Agency and Parks Canada, </span>
						<span class="wb-tmtxt" data-begin="62.06s" data-dur="2.34s">post jobs on their own sites too.</span></p>
						<p class="wet-boew-vd"><strong>(Medium shot of the Host. LINE DRAWING GRAPHIC: stick person points to Job Bank web page, where words “User ID” and “Password” are highlighted.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="64.40s" data-dur="2.44s">When you apply for jobs, potential employers might ask </span>
						<span class="wb-tmtxt" data-begin="66.83s" data-dur="2.34s">you to send them your résumé and a covering letter.</span></p>
						<p><span class="wb-tmtxt" data-begin="69.17s" data-dur="2.17s">Of course, you&#39;ll want to make a good first impression </span>
						<span class="wb-tmtxt" data-begin="71.34s" data-dur="2.04s">on any potential employer.</span></p>
						<p class="wet-boew-vd"><strong>(The text Résumé Builder appears across stick person’s screen.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="73.37s" data-dur="1.57s">Here we can help too!</span></p>
						<p><span class="wb-tmtxt" data-begin="74.94s" data-dur="1.67s">Check out our online Résumé Builder </span>
						<span class="wb-tmtxt" data-begin="76.61s" data-dur="1.84s">on the Job Bank Web site.</span></p>
						<p><span class="wb-tmtxt" data-begin="78.45s" data-dur="2.04s">It can show you how to create a first-class résumé </span>
						<span class="wb-tmtxt" data-begin="80.48s" data-dur="2.64s">by giving you tips and different layout options.</span></p>
						<p class="wet-boew-vd"><strong>(Medium shot of the Host. LINE DRAWING GRAPHIC: one stick person talks to another stick person behind a desk labelled Career Counsellor.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="83.12s" data-dur="2.24s">And if you&#39;re not sure which jobs you&#39;d like to apply for, </span>
						<span class="wb-tmtxt" data-begin="85.35s" data-dur="2.54s">check out our Career Navigator tool to explore </span>
						<span class="wb-tmtxt" data-begin="87.89s" data-dur="2.44s">occupations that you might be interested in.</span></p>
						<p><span class="wb-tmtxt" data-begin="90.32s" data-dur="2.90s">As well, career counsellors are usually available through </span>
						<span class="wb-tmtxt" data-begin="93.23s" data-dur="2.44s">your provincial or territorial government to help out.</span></p>
						<p class="wet-boew-vd"><strong>(Close-up of the Host. LINE DRAWING GRAPHIC: Stick person take a bow. Service Canada logo appears.)</strong></p>
						<p><span class="wb-tmtxt" data-begin="95.66s" data-dur="3.00s">At Service Canada, we&#39;re people serving people.</span></p>
						<p class="wet-boew-vd"><strong>(Dip to black.)</strong></p>
					</details>
				</figcaption>
			</figure>

			<details class="mrgn-tp-md">
				<summary>View code</summary>
				<pre><code>&lt;figure class=&quot;wb-mltmd&quot;&gt;
	&lt;video poster=&quot;demo/video1-en.jpg&quot; title=&quot;Looking for a Job&quot; muted&gt;
		&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4&quot; /&gt;
		&lt;track src=&quot;#inline-captions&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;details id=&quot;inline-captions&quot;&gt;
			&lt;summary&gt;Looking for a Job - HTML5 Transcript/Captions&lt;/summary&gt;
			&lt;p class=&quot;wet-boew-vd&quot;&gt;&lt;strong&gt;(Animated pen draws a red line that leads into the text Looking for A Job)&lt;/strong&gt;&lt;/p&gt;
			&lt;p class=&quot;wet-boew-vd&quot;&gt;&lt;strong&gt;(Cut to a medium shot of the Host. LINE DRAWING GRAPHIC: Stick person appears and waves.)&lt;/strong&gt;&lt;/p&gt;
			&lt;p&gt;&lt;span class=&quot;wb-tmtxt&quot; data-begin=&quot;2.50s&quot; data-dur=&quot;3.84s&quot;&gt;Hi, my name is Eric, and I&amp;#39;m a Service Canada employee.&lt;/span&gt;&lt;/p&gt;
			...
		&lt;/details&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
			</details>
		</section>

		<section class="col-md-6">
			<h3>MPEG4 (H264 + AAC) source with cue points</h3>
			<p>This example illustrates the use of buttons to navigate to specific cue points within the video.</p>
			<figure class="wb-mltmd">
				<video poster="demo/video1-en.jpg" title="Looking for a Job">
					<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
					<track src="#inline-captions" kind="captions" data-type="text/html" srclang="en" label="English" />
				</video>
				<button class="btn btn-info cuepoint" data-cuepoint="45s" type="button">Cue point - 45s</button>
				<button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button">Cue point - 01:10</button>
				<figcaption>
					<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
				</figcaption>
			</figure>
			<details class="mrgn-tp-md">
				<summary>View code</summary>
				<pre><code>&lt;figure class=&quot;wb-mltmd&quot;&gt;
	&lt;video poster=&quot;demo/video1-en.jpg&quot; title=&quot;Looking for a Job&quot;&gt;
		&lt;source type=&quot;video/mp4&quot; src=&quot;https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4&quot; /&gt;
		&lt;track src=&quot;#inline-captions&quot; kind=&quot;captions&quot; data-type=&quot;text/html&quot; srclang=&quot;en&quot; label=&quot;English&quot; /&gt;
	&lt;/video&gt;
	&lt;button class="btn btn-info cuepoint" data-cuepoint="45s" type="button"&gt;Cue point - 45s&lt;/button&gt;
	&lt;button class="btn btn-info cuepoint" data-cuepoint="01:10" type="button"&gt;Cue point - 01:10&lt;/button&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Looking for a Job (&lt;a href="cpts-lg-en.html"&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
			</details>
		</section>
	</div>

	<div class="row">
		<section class="col-md-6">
			<h3>MPEG4 (H264 + AAC) and WebM (VP8) source with full screen button</h3>
			<figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'>
				<video poster="demo/video1-en.jpg" title="Looking for a Job">
					<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
					<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
					<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
				</video>
				<figcaption>
					<p>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</p>
				</figcaption>
			</figure>

			<details class="mrgn-tp-md mrgn-bttm-lg">
				<summary>View code</summary>
				<section>
					<h4>In-page HTML</h4>
					<pre><code>&lt;figure class="wb-mltmd" data-wb-mltmd='{"fullscreenBtn": true}'&gt;
	&lt;video poster="demo/video1-en.jpg" title="Looking for a Job"&gt;
		&lt;source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" /&gt;
		&lt;source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" /&gt;
		&lt;track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" /&gt;
	&lt;/video&gt;
	&lt;figcaption&gt;
		&lt;p&gt;Looking for a Job (&lt;a href="cpts-lg-en.html"&gt;Transcript&lt;/a&gt;)&lt;/p&gt;
	&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
				</section>
			</details>
		</section>

		<section class="col-md-6">
			<h3>Multimedia player in an overlay</h3>
			<p><a href="#mltmd-overlay" aria-controls="mltmd-overlay" class="overlay-lnk" role="button">Open the video</a></p>
			<details class="mrgn-tp-md">
				<summary>View code</summary>
				<pre><code>&lt;p&gt;&lt;a href="#mltmd-overlay" aria-controls="mltmd-overlay" class="overlay-lnk" role="button"&gt;Open the video&lt;/a&gt;&lt;/p&gt;

		&lt;section id="mltmd-overlay" class="wb-overlay modal-content overlay-def wb-popup-full"&gt;
		&lt;header class="modal-header"&gt;
			&lt;h2 class="modal-title"&gt;Multimedia player in an overlay&lt;/h2&gt;
		&lt;/header&gt;
		&lt;div class="modal-body"&gt;
			&lt;div class="row"&gt;
				&lt;div class="col-xs-8 col-xs-offset-2"&gt;
					&lt;figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'&gt;
						&lt;video poster="demo/video1-en.jpg" title="Looking for a Job"&gt;
							&lt;source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" /&gt;
							&lt;source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" /&gt;
							&lt;track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" /&gt;
						&lt;/video&gt;
						&lt;figcaption&gt;Looking for a Job (&lt;a href="cpts-lg-en.html"&gt;Transcript&lt;/a&gt;)&lt;/figcaption&gt;
					&lt;/figure&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;/section&gt;</code></pre>
			</details>
		</section>
	</div>
</section>

<section id="mltmd-overlay" class="wb-overlay modal-content overlay-def wb-popup-full">
	<header class="modal-header">
		<h2 class="modal-title">Multimedia player in an overlay</h2>
	</header>
	<div class="modal-body">
		<div class="row">
			<div class="col-xs-8 col-xs-offset-2">
				<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://wet-boew.github.io/v4.0-ci/demos/multimedia/multimedia-en.html"}'>
					<video poster="demo/video1-en.jpg" title="Looking for a Job">
						<source type="video/webm" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.webm" />
						<source type="video/mp4" src="https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4" />
						<track src="cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
					</video>
					<figcaption>Looking for a Job (<a href="cpts-lg-en.html">Transcript</a>)</figcaption>
				</figure>
			</div>
		</div>
	</div>
</section>
