Responsive Video Player

A simple, responsive wrapper for self-hosted or YouTube videos.

Code Example Shortcut: z-video

<div class="video-container">
    <video controls  poster="path_to_your_thumbnail.jpg">
        <source src="path_to_your_video.mp4" type="video/mp4">
        <source src="path_to_your_video.webm" type="video/webm"> <!--optional fallback video-->
        Your browser does not support the video tag.
    </video>
</div>

Code Example Shortcut: z-video-youtube

<div class="youtube:video-container">
    <iframe src="https://www.youtube.com/embed/IaQEmepUfwQ?si=pluiJZikUWe9e1KK"" frameborder="0" allowfullscreen></iframe>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.