<main>
<section>
<h1>Cloud CDN-hosted videos</h1>
<p>Developed to replace YouTube hosted videos using <code>iframes</code> with far more performant solution.</p>
<p>It's far easier to host videos on a Cloud CDN media server, such as <a class=-nowrap target=_blank title="[new window]" href="https://cloudinary.com/">Cloudinary</a> or <a class=-nowrap target=_blank title="[new window]" href="https://www.netlify.com/">Netlify</a>, and use the HTML5 video element to serve them, rather than <a class=-nowrap target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/jOPZxjb">Late-load YouTube videos on demand</a> using an iframe with its shit-ton of assets.</p>
</section>
<section>
<h2>Single video</h2>
<!-- NOTE: The poster image was done slightly different on the real page (https://batthedog.uk/). It used a picture element to assign differently sized images to different viewports, for performance, as it saved a few bytes. I may create yet another pen with full disclosure. -->
<div class=video_container>
<video class=video controls type="video/mp4"
poster="https://batthedog.uk/images/video/back-to-black/back-to-black.855.jpg"
aria-label="Back to Black"
src="https://res.cloudinary.com/bat-the-dog/video/upload/v1585221036/video/aged-film-compressed/back-to-black_rfyjly.mp4">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://res.cloudinary.com/bat-the-dog/video/upload/v1585221036/video/aged-film-compressed/back-to-black_rfyjly.mp4">download Back to Black</a> and watch it with your favorite video player!
</video>
</div>
<p>It is suggested that two formats of the video are required; webM (vp8) and mp4 (H.264). Though Can-I-Use suggests <a class=-nowrap target=_blank title="[new window]" href="https://caniuse.com/#search=mp4">mp4</a> alone should suffice for most uses.</p>
<p>It is always best practice to compress the videos to suit engagement. I generically use iMovie or <a class=-nowrap target=_blank title="[new window]" href="">ClipChamp</a> to achieve this, though sometimes, when I need fine-grain control, I use the free Mac desktop app <a class=-nowrap target=_blank title="[new window]" href="">Handbrake</a>.</p>
</section>
<section>
<h2>How it works</h2>
<p>Takes a poster image defined in a <code>video</code> element and places it as a background image to the container. The poster is then replaced with a transparent 16x9px png to maintain the aspect ratio. Other aspect ratios are usable, just replace the png to suit.</p>
<p>The video title is generated from the <code>aria-label</code> as applied to the <code>video</code>, accessible by default. Placement and visual is controlled via CSS.</p>
<p>A black-to-transparent vignette is overlaid on the video. Upon hover, or focus, its opacity is reduced, brightening the image slightly. There's an option to completely remove the vignette, and title, upon playback.</p>
<p>All colour options, drop-shadow, and borders are editable via CSS Custom Properties.</p>
</section>
<section class=-fullWidthBlock>
<h2>Multiple videos <span>(in a block)</span></h2>
<ul class=video_lst>
<li class=video_container>
<video class=video controls type="video/mp4"
poster="https://batthedog.uk/images/video/you-oughta-know/you-oughta-know.855.jpg"
aria-label="You Oughta Know"
src="https://res.cloudinary.com/bat-the-dog/video/upload/v1584894030/video/aged-film-compressed/bat-the-dog-you-oughta-know_o99pr1.mp4">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://res.cloudinary.com/bat-the-dog/video/upload/v1584894030/video/aged-film-compressed/bat-the-dog-you-oughta-know_o99pr1.mp4">download You Oughta Know</a> and watch it with your favorite video player!
</video>
</li>
<li class=video_container>
<video class=video controls type="video/mp4"
poster="https://batthedog.uk/images/video/river-deep/river-deep.855.jpg"
aria-label="River Deep, Mountain High"
src="https://res.cloudinary.com/bat-the-dog/video/upload/v1584887419/video/aged-film-compressed/bat-the-dog-river-deep-mountain-high_rxnnok.mp4">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://res.cloudinary.com/bat-the-dog/video/upload/v1584887419/video/aged-film-compressed/bat-the-dog-river-deep-mountain-high_rxnnok.mp4">download River Deep, Mountain High</a> and watch it with your favorite video player!
</video>
</li>
<li class=video_container>
<video class=video controls type="video/mp4"
poster="https://batthedog.uk/images/video/piece-of-my-heart/piece-of-my-heart.855.jpg"
aria-label="Piece of my Heart"
src="https://res.cloudinary.com/bat-the-dog/video/upload/v1584884192/video/aged-film-compressed/bat-the-dog-little-piece-of-my-heart_jazkfj.mp4">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://res.cloudinary.com/bat-the-dog/video/upload/v1584884192/video/aged-film-compressed/bat-the-dog-little-piece-of-my-heart_jazkfj.mp4">download Piece of my Heart</a> and watch it with your favorite video player!
</video>
</li>
<li class=video_container>
<video class=video controls type="video/mp4"
poster="https://batthedog.uk/images/video/back-to-black/back-to-black.855.jpg"
aria-label="Back to Black"
src="https://res.cloudinary.com/bat-the-dog/video/upload/v1585221036/video/aged-film-compressed/back-to-black_rfyjly.mp4">
Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://res.cloudinary.com/bat-the-dog/video/upload/v1585221036/video/aged-film-compressed/back-to-black_rfyjly.mp4">download Back to Black</a> and watch it with your favorite video player!
</video>
</li>
</ul>
</section>
<section>
<h2>Built in Accessibility by default</h2>
<ul>
<li>Browser default player</li>
<li>Friendly to keyboard-only users</li>
<li>Fully responsive</li>
</ul>
</section>
<section>
<h2>That beautiful code!</h2>
<p>See the CodePen panels for annotation, this is the production friendly nitty-gritty:</p>
<figure>
<figcaption>HTML single video</figcaption>
<pre><code class=language-markup spellcheck=false contenteditable><div class=video_container>
<video class=video controls type="video/mp4"
poster="POSTER_URL"
aria-label="VIDEO_TITLE"
src="VIDEO_MP4_URL">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="VIDEO_MP4_URL">download VIDEO_TITLE</a> and watch it with your favorite video player!
</video>
</div>
</code></pre>
</figure>
<figure>
<figcaption>HTML multiple video</figcaption>
<pre><code class=language-markup spellcheck=false contenteditable><ul>
<li class=video_container>
<video class=video controls type="video/mp4"
poster="POSTER_URL"
aria-label="VIDEO_TITLE"
src="VIDEO_MP4_URL">
Sorry, your browser doesn't support embedded videos, but don't worry, you can
<a href="VIDEO_MP4_URL">download VIDEO_TITLE</a> and watch it with your favorite video player!
</video>
</li>
… more videos …
</ul>
</code></pre>
</figure>
<figure>
<figcaption>CSS <small>video container</small></figcaption>
<pre><code class=language-css spellcheck=false contenteditable>.video_container {
--titleColor: hsl(30, 100%, 60%);
--titleFromEdge: .5rem 1rem;
--containerBorderColor: #000;
--videoBorderColor: hsl(30, 100%, 20%);
--videoBorderColorHover: hsl(30, 100%, 40%);
--borderRadius: .5rem;
--bgGradient: radial-gradient(circle, transparent 50%, black 100%);
--focusColor: hsl(40, 100%, 50%);
position: relative;
border: 1px solid var(--containerBorderColor);
border-radius: var(--borderRadius);
}
.video_container::before,
.video_container::after {
content: "";
position: absolute;
top: 1px; left: 1px; bottom: 1px; right: 1px;
border-radius: var(--borderRadius);
overflow: hidden;
pointer-events: none;
}
/* Background image overlay */
.video_container::before {
background-size: cover;
}
/* Vignette gradient and text title overlay */
.video_container::after {
color: var(--titleColor);
background-image: var(--bgGradient);
text-align: right;
text-shadow: 0 0 2px #000;
padding: var(--titleFromEdge);
transition: opacity .3s ease-out;
}
.video_container:hover::after {
opacity: 0.5;
}
/* Optionally turn off vignette, and title, while video-player has focus */
.video_container:focus-within::after {
opacity: 0;
}
</code></pre>
</figure>
<style>
</style>
<h2>Gradient vignette overlay <small>(over a white bg)</small></h2>
<p><code class=language-css>radial-gradient(circle, transparent 50%, black 100%)</code></p>
<div class=video_container>
<div class=vignette_container>
</div>
</div>
<figure>
<figcaption>CSS <small>video element</small></figcaption>
<pre><code class=language-css spellcheck=false contenteditable>.video {
display: block;
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
border: 1px solid var(--videoBorderColor);
border-radius: var(--borderRadius);
overflow: hidden;
transition: all .3s ease-out;
}
.video:hover {
box-shadow: 0 0 .5rem #000;
}
.video:focus,
.video:focus-within {
outline: 0;
box-shadow: 0 0 .5rem var(--focusColor);
}
.video:focus,
.video:focus-within,
.video:hover {
border: 1px solid var(--videoBorderColorHover);
}
</code></pre>
</figure>
<figure>
<figcaption>JavaScript</figcaption>
<pre><code class=language-js spellcheck=false contenteditable>var Video_Bg_Title = (function(){
let count = 0;
const videos = document.getElementsByTagName('video');
for (const video of videos) {
const parent = video.parentElement;
const clss = `-js-video_container-${count++}`;
parent.classList.add(clss);
const style = document.createElement('style');
// Copy poster to ::before background image
// Use aria-label as the content title
style.textContent = `
.${clss}::before{background-image:url(${video.poster})}
.${clss}::after{content:"${video.getAttribute('aria-label') || ''}"}
`;
parent.appendChild(style);
// Replace poster with 16x9px transparent png
// Other aspect ratios may be used
video.poster = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==";
}
})();
</code></pre>
</figure>
</section>
<section>
<!--
<h2>Alternative solutions</h2>
<p class=tagline>This is Version 3 which is heavily based on the Paul Irish project: <a class=-nowrap target=_blank title="[new window]" href="https://github.com/paulirish/lite-youtube-embed">Lite YouTube Embed</a>, but updated to meet WCAG Accessibility requirements.</p>
<p>There's also a pen of <a target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/dyoJrav">Version 2</a> which was loosely based around <a target=_blank title="[new window]" href="https://www.cssscript.com/load-youtube-video-thumbnail-lazytube/">LazyTube</a> and doesn't use Custom Elements.</p>
<p>Another method worthy of serious consideration is: <a class=-nowrap target=_blank title="[new window]" href="https://dev.to/haggen/lazy-load-embedded-youtube-videos-520g">Lazy load embedded YouTube videos</a> by Arthur Corenzan.</p>
-->
<h2>Credits & references</h2>
<p>Videos courtesy of <a class=-nowrap target=_blank title="[new window]" href="http://batthedog.uk/">Bat the Dog</a></p>
<p>Font-size, and spacing, calculation generated by: <a class=-nowrap target=_blank title="[new window]" href="https://websemantics.uk/tools/responsive-font-calculator/">Fluid-responsive font-size calculator</a></p>
<p>Code blocks: <a class=-nowrap target=_blank title="[new window]" href="https://codepen.io/2kool2/pen/MEbeEg">Code highlighting with Prism.js</a></p>
<p>Embedding code: <a class=-nowrap target=_blank title="[new window]" href="https://websemantics.uk/tools/escaping-html/">Escaping HTML symbols/entities</a></p>
<p><a class=-nowrap target=_blank title="[new window]" href="http://png-pixel.com/">Transparent png generator</a></p>
</section>
</main>
<!-- Codepen footer include -->
[[[https://codepen.io/2kool2/pen/mKeeGM]]]
!
