Videos
Videos can be served in several formats. HTML5 Video is handy in that it's repsonsive by default. Our usual way of serving vidoes in iframes (using an embed code), is not inherently responsive. Below are some examples and tips.
Don't modify the properties of the iframe or wrapper directly. For custom padding, max-width, alignment, background-color, etc, use additional wrappers around the iframe-wrapper.
HTML5 Video
HTML5 Videos are thankfully responsive by default, but they have their quirks. Chrome (as of 2019) automatically includes a download button action. Be warned that controls in HTML5 video controls may have poor compatibility with jQuery sliders and other 3rd party libraries (as we found with the product media sliders in 2018). Just test thoroughly!
<video controls poster="<image-link>" controlsList="nodownload">
<source src="<video-source>" type="video/mp4">
Your browser does not support the video tag.
</video>
These notes on the state of HTML5 videoes are likely no longer releavant. Check maintained documentation elsewhere for the most up-to-date information.
Iframe Video
Iframe videos require a parent element with the class .iframe-wrapper aand class .iframe on the iframe itself.
<div class="iframe-wrapper">
<iframe class="iframe" src="<video-source>">
</iframe>
</div>
Video Credit
Video by AP Vibes from Pexels .