Video
Video can be embedded from YouTube, Vimeo or our media server.
It is important to ensure that if the video source includes the domain in it, that the protocol used is https and not http.
This will ensure your video is displayed on both secure and non-secure pages.
HTML5 video
The HTML5 <video> element can be included within page content, the right column sidebar or a media widget.
If the browser does not support the <video> element or the .mp4 file type, then a JavaScript polyfill will be loaded, in order to provide the functionality to that browser.
JavaScript class: .js-mediaelementplayer
<video class="js-mediaelementplayer"
controls
poster="/kss-assets/images/placeholder/560x320.png"
style="width:100%;height:100%;"
width="100%" height="100%">
<source src="/kss-assets/video/video-560x320.mp4">
</video>
Responsive video embed
Responsive video embed requires a JavaScript plugin which is documented within the JavaScript section of the style guide.
Videos that use an <iframe> should have a title attribute to say what sort of content it is (in this case, a video). Using a YouTube video as an example, an ideal title attribute should have a value of YouTube video - title of video.
JavaScript class: .js-responsive-video-embed
<div class="c-responsive-video-embed js-responsive-video-embed">
<iframe width="560" height="320" src="http://www.youtube.com/embed/TadTb5iuSDg" frameborder="0" title="YouTube Video" allowfullscreen></iframe>
</div>
Video grid
Video grids should be used for multiple videos on a page, or when you want to have a large or small video embedded within your page as opposed to a full-width video.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Link 1 - Heading 2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
<div class="c-video-grid [modifier class]">
<div class="c-video-grid__row">
<section class="c-video-grid__column">
<div class="c-video-grid__item">
<video class="js-mediaelementplayer"
controls
poster="/kss-assets/images/placeholder/560x320.png"
style="width:100%;height:100%;"
width="560" height="320">
<source src="/kss-assets/video/video-560x320.mp4">
</video>
</div>
<div class="c-video-grid__body">
<h2 class="c-video-grid__title"><a class="c-video-grid__title-link" href="#">Link 1 - Heading 2</a></h2>
<div class="c-video-grid__description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</section>
<section class="c-video-grid__column">
<div class="c-video-grid__item">
<div class="c-responsive-video-embed js-responsive-video-embed">
<iframe width="560" height="320" src="http://www.youtube.com/embed/TadTb5iuSDg" frameborder="0" title="YouTube Video" allowfullscreen></iframe>
</div>
</div>
<div class="c-video-grid__body">
<h2 class="c-video-grid__title"><a class="c-video-grid__title-link" href="#">Link 1 - Heading 2</a></h2>
<div class="c-video-grid__description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</section>
<section class="c-video-grid__column">
<div class="c-video-grid__item">
<div class="c-responsive-video-embed js-responsive-video-embed">
<iframe src="https://player.vimeo.com/video/75928150" width="560" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div class="c-video-grid__body">
<h2 class="c-video-grid__title"><a class="c-video-grid__title-link" href="#">Link 1 - Heading 2</a></h2>
<div class="c-video-grid__description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</section>
</div>
</div>