Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <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>

    <div class=video_container>
      <video class=video controls type="video/mp4"
             poster="https://batthedog.uk/i/video/100/back-to-black.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/i/video/100/you-oughta-know.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/i/video/100/river-deep.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/i/video/100/piece-of-my-heart.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/i/video/100/back-to-black.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>&lt;div class=video_container&gt;
  &lt;video class=video controls type="video/mp4"
    poster="POSTER_URL"
    aria-label="VIDEO_TITLE"
    src="VIDEO_MP4_URL"&gt;
    Sorry, your browser doesn't support embedded videos, but don't worry, you can
    &lt;a href="VIDEO_MP4_URL"&gt;download VIDEO_TITLE&lt;/a&gt; and watch it with your favorite video player!
  &lt;/video&gt;
&lt;/div&gt;
</code></pre>
    </figure>

    <figure>
      <figcaption>HTML multiple video</figcaption>
      <pre><code class=language-markup spellcheck=false contenteditable>&lt;ul&gt;
  &lt;li class=video_container&gt;
    &lt;video class=video controls type="video/mp4"
      poster="POSTER_URL"
      aria-label="VIDEO_TITLE"
      src="VIDEO_MP4_URL"&gt;
      Sorry, your browser doesn't support embedded videos, but don't worry, you can 
      &lt;a href="VIDEO_MP4_URL"&gt;download VIDEO_TITLE&lt;/a&gt; and watch it with your favorite video player!
    &lt;/video&gt;
  &lt;/li&gt;
  &hellip; more videos &hellip;
&lt;/ul&gt;  
</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 &amp; 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]]]
              
            
!

CSS

              
                /* Generic page styles */

:root {

  /* Fluidly variable between: 16px @ 320px and 32px @ 1920px */
  --space: calc(1rem + ((1vw - 0.2em) * 1));

  --spaceDouble: calc(var(--space) * 2);
  --spaceTwoThirds: calc(var(--space) / 1.5);
  --spaceHalf: calc(var(--space) / 2);
  --spaceThird: calc(var(--space) / 3);
  --spaceQuarter: calc(var(--space) / 4);

  --maxTextWidth: 35em;

  --colorF: #f5f5f5;
  --colorE: #e5e5e5;
  --colorD: #d5d5d5;
  --bgColor0: #0a0a0a;
  --bgColor1: #1a1a1a;
  --bgColor2: #2a2a2a;

  font-size: var(--space);
  line-height: calc(var(--space) * 1.625);
  max-width: 120rem;
  margin: 0 auto;
}
@media (min-width: 120em) {
  :root {
    --space: 2rem;
  }
}
body {
  color: var(--colorD);
  background-color: var(--bgColor0);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7'/%3E%3C/filter%3E%3C/defs%3E%3Crect filter='url(%23a)' opacity='.3' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  margin: var(--space);
  font-family: sans-serif;
}
h1 {
  font-size: 1.5rem;
  font-weight: 100;
  line-height: 1.2;
  margin: 0 0 var(--spaceHalf);
}
h2 {
  font-size: 1.25rem;
  font-weight: 100;
  line-height: 1.2;
  margin: var(--spaceDouble) 0 0;
}
h2 > span {font-size:smaller}
h3 {
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.2;
}
section {
  max-width: var(--maxTextWidth);
  margin-left: auto;
  margin-right: auto;
}
.-fullWidthBlock {
  max-width: none;
}
p, ul {margin: var(--spaceTwoThirds) 0  0}
li {margin: var(--spaceQuarter) 0  0}
p, li {
  font-weight: 100;
}
.-nowrap {white-space:nowrap}


/* Fancier text links */
body {
  --fancyColor: hsla(214,72%,48%,1);
  --fancyColorHover: hsla(214,72%,20%,1);
  --fancyBgHover: hsla(214,100%,80%,1);
  --fancyUnderline: hsla(214,72%,48%,1);
}
@media (prefers-color-scheme: dark) {
  body:not([data-lightMode="light"]) {
    --fancyColor: hsla(214,100%,72%,1);
    --fancyColorHover: #fff;
    --fancyBgHover: hsla(214,100%,25%,1);
    --fancyUnderline: hsla(214,100%,72%,.4);
  }
}
body[data-lightMode="dark"] {
  --fancyColor: hsla(214,100%,72%,1);
  --fancyColorHover: #fff;
  --fancyBgHover: hsla(214,100%,25%,1);
  --fancyUnderline: hsla(214,100%,72%,.4);
}
/* Fancy links */
a:link,
a:visited {
  color: var(--fancyColor);
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  border-bottom: 1px solid var(--fancyUnderline);
  transition: color .3s ease-out;
}
a:hover,
a:focus {
  color: var(--fancyColorHover);
}
a:focus {
  outline: none;
}
a::before,
a::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  opacity: .5;
  transform: scaleX(0);
  transition: none;
  /* Set to the delayed-on time, or as close as possible */
  transition: all .15s linear;
}
a::before {
  background-color: var(--fancyBgHover);
  outline-offset: -.25rem;
  outline: var(--fancyBgHover) solid .5rem;
  height: 100%;
  bottom: 0;
  z-index: -1;
}
a::after {
  background-color: var(--fancyColor);
  bottom: -0.1rem;
  height: 0.1rem;
}
a:hover::before,
a:focus::before,
a:hover::after,
a:focus::after {
  opacity: 1;
  transform: scaleX(1);
  /* Delayed to reduce annoying unintentional activations */
  transition: all .3s ease-in .15s;
}
@media (prefers-reduced-motion: reduce) {
  a::before,
  a::after {
    transition: none;
  }
}


/* Grid layout */

.video_lst {
  --columns: 1fr;
  display: grid;
  grid-gap: var(--space);
  grid-template-columns: var(--columns);
  list-style: none;
  margin: var(--spaceHalf) 0 0;
  padding: 0;
}
@media(min-width: 50em) { /* 800px */
  .video_lst {
    --columns: 1fr 1fr;
  }
}


/* Video Players */
.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-shadow: 0 0 2px #000;
  text-align: right;
  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;
}

.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);
}


/* Vignette example */

.vignette_container {
  /* Anamorphic 2.39:1 */
  padding-bottom: calc(100% / 2.39);
  background-color: #fff;
  border: 1px solid #777;
  border-radius: var(--borderRadius);
  overflow: hidden;
}



/* Code containers */

figure {
  max-width: var(--maxTextWidth);
  margin: var(--spaceDouble) 0;
}



/* Includes Prism code highlighting: https://codepen.io/2kool2/pen/MEbeEg */
              
            
!

JS

              
                // Force dark mode for fancy-links and Prism code highlighting
document.body.setAttribute('data-lightMode', 'dark');


var Video_Bg_Title = (function(){

  let count = 0;
  const videos = document.getElementsByTagName('video');
  for (const video of videos) {
  
    // Use aria-label as the content title
    const parent = video.parentElement;
    const clss = `-js-video_container-${count++}`;
    parent.classList.add(clss);
    const style = document.createElement('style');
    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
    video.poster = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==";

  }
})();




/* Includes Prism code highlighting: https://codepen.io/2kool2/pen/MEbeEg */

              
            
!
999px

Console