diff --git a/public/styles.css b/public/styles.css
index 5465ea6..4a35ece 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -545,11 +545,15 @@ main {
  * Single Video
  */
 article {
+  width: 100%;
+  box-sizing: border-box;
   padding-bottom: calc(var(--gutter) * 3);
   margin-bottom: calc(var(--gutter) * 3);
   border-bottom: 1px solid var(--separator);
+  overflow: hidden;
 }
 article .video-content {
+  width: 100%;
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
@@ -613,16 +617,15 @@ h3[id*="example"]{
   font-size: 24px;
   margin-bottom: calc(var(--gutter) / 2);
 }
-article pre,
+article pre code,
 .code-sample .code-sample--content {
-  max-width: 760px;
-  white-space: pre-wrap;
+  display: block;
   font-size: 18px;
   font-family: monospace;
   padding: var(--gutter);
   border: 1px solid var(--code-border);
   background: var(--code-background);
-  overflow-y: auto;
+  overflow-x: auto;
 }
 .video-container {
   position: relative;
@@ -630,11 +633,14 @@ article pre,
   max-width: 1200px;
   margin: 0 auto;
   overflow: hidden;
-  aspect-ratio: 16 / 9;
+  padding-bottom: 56.25%;
 }
 .video-container--overlay {
   display: none;
 }
+.video-container.has-player {
+  padding-bottom: 0;
+}
 .has-overlay .video-container--overlay {
   position: absolute;
   width: 100%;
diff --git a/src/api/01-basics/01-single-video.md b/src/api/01-basics/01-single-video.md
index 756c2ba..a26e4fa 100644
--- a/src/api/01-basics/01-single-video.md
+++ b/src/api/01-basics/01-single-video.md
@@ -8,7 +8,6 @@ length: '1:04'
 video-sources:
   - src: https://storage.googleapis.com/kino-assets/single-video/video.mp4
     type: video/mp4; codecs="avc1.640032,mp4a.40.2"
-    cast: true
 thumbnail: https://storage.googleapis.com/kino-assets/single-video/thumbnail.png
 media-session-artwork:
   - sizes: 96x96
@@ -29,7 +28,6 @@ media-session-artwork:
   - sizes: 512x512
     src: https://storage.googleapis.com/kino-assets/single-video/artwork-512x512.png
     type: image/png
-
 ---
 
 ## Introduction
diff --git a/src/api/03-user-experience/07-autoplay.md b/src/api/03-user-experience/07-autoplay.md
new file mode 100644
index 0000000..6b6cbef
--- /dev/null
+++ b/src/api/03-user-experience/07-autoplay.md
@@ -0,0 +1,225 @@
+---
+title: Autoplay
+description: |
+  Learn how to start video playback automatically and employ autoplay strategies that don't lead to degraded user experience.
+date: Septembed 22nd, 2021
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/autoplay/manifest.mpd
+    type: application/dash+xml
+  - src: https://storage.googleapis.com/kino-assets/autoplay/master.m3u8
+    type: application/x-mpegURL
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/autoplay/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/autoplay/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/autoplay/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/autoplay/artwork-512x512.png
+    type: image/png
+autoplay: true
+---
+
+## Introduction
+
+Sometimes the video is not just a _part_ of your web page content. Sometimes it
+is _the_ content and your users expect it to start playing automatically
+as soon as possible.
+
+There are two main ways of accomplishing this autoplay behavior:
+
+1. Using the `<video autoplay>` attribute.
+2. Using JavaScript.
+
+Let's take a look at the benefits and limitations of each.
+
+## Using the `autoplay` attribute
+
+The better known and simpler way of instructing browsers to automatically play
+a video is using the `autoplay` attribute.
+
+```html
+<video controls autoplay>
+  <source src="video.mp4" type="video/mp4">
+</video>
+```
+
+Browsers might not honor the attribute for various reasons, likely
+because a given video contains sound. Automatic playback of videos with sound often leads
+to poor user experience and browsers use multiple signals to determine
+if playback with sound should be allowed.
+
+To improve the chance of browsers starting playback, choose to
+play the video muted.
+
+```html
+<!-- Browsers will usually allow autoplay when
+     the `muted` attribute is also present. -->
+<video controls autoplay muted>
+  <source src="video.mp4" type="video/mp4">
+</video>
+```
+
+**Note:** Unless you provide your own UI for the video controls, make sure
+to also use the `controls` attribute to let the browser render the default video
+controls.
+
+## Using JavaScript
+
+In JavaScript the `<video>` element contains a `play()` method that can be used
+to attempt to manually start playback as soon as possible.
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+</video>
+<script>
+  const videoElement = document.querySelector('video');
+  videoElement.play().then(() => { /* video is playing */});
+</script>
+```
+
+As with the `autoplay` attribute, browsers may choose to not play the
+video in this situation, especially if it contains sound and is not muted.
+
+One benefit of calling the `play()` method is that it returns a promise
+that resolves when playback starts and rejects when it won't start for any
+reason. This gives you a chance to respond.
+
+A good strategy is to mute the video and re-attempt the playback. If
+that fails, render a custom play button or don't do anything and let the user use video controls rendered by the browser.
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+</video>
+<script>
+  const videoElement = document.querySelector('video');
+
+  videoElement.play()
+    .catch(() => {
+      // Mute video and retry playback.
+      videoElement.muted = true;
+      videoElement.play()
+        .catch(() => {
+          // Can't autoplay with sound or muted.
+        })
+   })
+
+   /**
+    * Note: In older browsers the `play()` method may not
+    *       return a promise. If you need to support
+    *       pre-2019 browsers, you could do:
+    *
+    * Promise.resolve(videoElement.play())
+    *   .catch(() => {
+    *     // Mute and try playing again.
+    *   })
+    *
+    * ... to wrap the non-promise return values as promises.
+</script>
+```
+
+### Unmute button
+
+Refresh this page and you'll likely notice the video now plays muted and there
+is a "Tap to unmute" button rendered over it.
+
+That's a custom element styled and positioned to render over the video. When
+the button is clicked, simple JavaScript runs and removes the `muted` attribute
+from the video and it continues playing with sound.
+
+This strategy combines the best of both worlds. Users are not going to get
+startled by sudden loud playback while the action necessary to achieve playback
+with sound is handily available.
+
+```html
+<section>
+  <video controls>
+    <source src="video.mp4" type="video/mp4">
+  </video>
+  <button>🔊</button>
+</section>
+
+<style>
+  /* Only basic layout, no fancy styling. */
+  section {
+    display: inline-block;
+    position: relative;
+  }
+  button {
+    font-size: 80px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>
+
+<script>
+  const videoElement = document.querySelector('video');
+  const unmuteButton = document.querySelector('button');
+
+  videoElement.play()
+    .catch(() => {
+      // Mute video and retry playback.
+      videoElement.muted = true;
+      videoElement.play()
+        .then(() => {
+          // When the unmute button is clicked,
+          // unmute video and remove the button.
+          unmuteButton.addEventListener('click', () => {
+            videoElement.muted = false;
+            unmuteButton.remove();
+          });
+        })
+        .catch(() => {
+          // Can't autoplay with sound or muted.
+        })
+   })
+</script>
+```
+
+## Engagement signals
+
+Browsers use various heuristics to determine whether automatic playback with
+sound is expected by the user or not. These heuristics differ between browsers,
+but here are a few example use cases where autoplay with sound is likely:
+
+* When the newly loaded page is a result of internal navigation initiated by
+  the user, e.g. click, tap etc.
+* When the user has installed the PWA or added the site to their home screen.
+* When user engagement signals are strong, e.g. on video sites where the user
+  regularly watches the content.
+
+Find more in-depth information at the [Chrome Developers website].
+
+## What's Next?
+
+In the [next article], we are going explore the Picture-in-Picture API, which can be used to play videos and other media sources in a floating window that stays on top of other applications.
+
+[Chrome Developers website]: https://developer.chrome.com/blog/autoplay/
+[next article]: /picture-in-picture/
diff --git a/src/api/03-user-experience/08-picture-in-picture.md b/src/api/03-user-experience/08-picture-in-picture.md
new file mode 100644
index 0000000..6277483
--- /dev/null
+++ b/src/api/03-user-experience/08-picture-in-picture.md
@@ -0,0 +1,134 @@
+---
+title: Picture-in-Picture
+description: |
+  Play your videos in a detached, floating window that stays on top of other applications using the Picture-in-Picture API.
+date: January 31st, 2022
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/picture-in-picture/manifest.mpd
+    type: application/dash+xml
+  - src: https://storage.googleapis.com/kino-assets/picture-in-picture/master.m3u8
+    type: application/x-mpegURL
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/picture-in-picture/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/picture-in-picture/artwork-512x512.png
+    type: image/png
+pip: true
+---
+
+## The basics
+
+The three main pieces the Picture-in-Picture API introduces are:
+
+1. The `requestPictureInPicture()` method of `<video>` elements.
+2. The `exitPictureInPicture()` method of the `document`.
+3. The `pictureInPictureElement` property of the `document` or a `shadowRoot`.
+
+A minimal example of controlling the video's Picture-in-Picture state would only consist of calling `requestPictureInPicture` and `exitPictureInPicture` respectively:
+
+```html
+<video src="video.mp4"></video>
+<button>Toggle Picture-in-Picture</button>
+
+<script>
+  const video = document.querySelector('video');
+  const button = document.querySelector('button');
+
+  button.addEventListener('click', () => {
+    document.pictureInPictureElement === video
+      ? document.exitPictureInPicture()
+      : video.requestPictureInPicture();
+  });
+</script>
+```
+
+## Checking for feature support
+
+[Picture-in-Picture API support] is different from what you're probably used to. Even in browsers that implement it, the feature may be disabled by the `picture-in-picture` Feature Policy. There is a handy `pictureInPictureEnabled` property that will be present on the `document` in browsers that implement the API and its value will be `true` if Picture-in-Picture mode is allowed.
+
+Be aware any request to enter or leave the Picture-in-Picture mode could fail or may be declined by the browser for other reasons, and so you should account for that:
+
+```html
+<video src="video.mp4"></video>
+<!-- Disable the button by default. -->
+<button disabled>Picture-in-Picture not available</button>
+
+<script>
+  const video = document.querySelector('video');
+  const button = document.querySelector('button');
+
+  const setupPip = () => {
+    // Only enable the button when PiP is enabled.
+    if (!document.pictureInPictureEnabled) return;
+
+    button.innerText = 'Toggle Picture-in-Picture';
+    button.disabled = false;
+
+    button.addEventListener('click', async () => {
+      // Entering and leaving PiP could take a little while, so we'll
+      // disable the button while we wait.
+      button.disabled = true;
+      try {
+        document.pictureInPictureElement === video
+          ? await document.exitPictureInPicture()
+          : await video.requestPictureInPicture();
+      } catch (e) {
+        // Show or log the error.
+      }
+      button.disabled = false;
+    });
+  }
+  setupPip();
+</script>
+```
+
+## Advanced usage
+
+There are several more things you might want to consider to make the Picture-in-Picture experience even better:
+
+1. Use the [Media Session API] action handlers to display more controls in the Picture-in-Picture window.
+2. Listen to `enterpictureinpicture` and `leavepictureinpicture` events and update your UI when Picture-in-Picture window is shown or closed.
+3. Display a [MediaStream] object such as the user's webcam feed, another application window or canvas contents in the Picture-in-Picture window.
+
+You can find more information and code snippets in a [Google Developers blog post].
+
+## See it in action
+
+When you play the video above, you can click the <span style="border-radius: 8px; background-color: var(--accent-background); width: 48px; height: 48px; display: inline-grid; place-items: center;" aria-label="Toggle picture in picture"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 15v6a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 21V8.25A1.5 1.5 0 0 1 3 6.75h3.75" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 3v7.5a1.5 1.5 0 0 0 1.5 1.5H21a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 21 1.5h-9.75A1.5 1.5 0 0 0 9.75 3Z" stroke="var(--accent)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square"></path><path d="M9 18.75V15H5.25M5.25 18.75 9 15" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span> button in the top right corner of the video to toggle Picture-in-Picture playback – if your browser supports the API.
+
+## What's next?
+
+Playing videos in a floating window is useful for a local viewing session. However, users often prefer to watch content on other devices such as their televisions. In the [next article] we'll talk about media casting – and Google Cast in particular.
+
+[Picture-in-Picture API support]: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API#htmlvideoelement.requestpictureinpicture
+[Media Session API]: https://web.dev/media-session/
+[MediaStream]: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
+[Google Developers blog post]: https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+[next article]: /google-cast/
diff --git a/src/api/03-user-experience/09-google-cast.md b/src/api/03-user-experience/09-google-cast.md
new file mode 100644
index 0000000..16fac14
--- /dev/null
+++ b/src/api/03-user-experience/09-google-cast.md
@@ -0,0 +1,230 @@
+---
+title: Google Cast
+description: |
+  Use the Google Cast SDK and turn your application to a cast sender able to stream your media to a compatible network device.
+date: January 31st, 2022
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/google-cast/manifest.mpd
+    type: application/dash+xml
+    cast: true
+  - src: https://storage.googleapis.com/kino-assets/google-cast/master.m3u8
+    type: application/x-mpegURL
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/google-cast/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/google-cast/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/google-cast/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/google-cast/artwork-512x512.png
+    type: image/png
+cast: true
+---
+
+## Introduction
+
+When one device controls media content playback on another device, we call it **casting**. These devices have to follow the same protocol in order to communicate. One of the most widely used casting protocols is Google Cast.
+
+## Basic concepts
+
+Before you can use Google Cast to stream your media to other devices, there are a few basic concepts you should understand:
+
+* **Sender application**: A mobile or web application that uses Google Cast SDK to discover target devices on the network and to initialize and remotely control playback of media being cast to receiver.
+* **Receiver application**: A web application that runs on a Google Cast compatible device such as a Chromecast dongle or a Chromecast built-in TV or speaker and implements the media player UI and handles messages from the *Sender application*.
+* **Google Cast SDK**: Collection of API libraries and code samples to allow Android, iOS and web developers to implement sender and receiver applications.
+
+**Note:** Developing a custom Receiver application is optional in many use cases. Two prebuilt options are available:
+
+* [Default Media Web Receiver] – predefined UI and colors, but you don't need to [register] a custom receiver application.
+* [Styled Media Web Receiver] – ability to customize the UI and colors using CSS, but it is necessary to [register] a custom receiver application.
+
+## Using the Cast Application Framework
+
+The [Cast Application Framework] (CAF) is the part of Google Cast SDK which exposes objects, methods and events necessary for building web sender applications.
+
+```html
+<script>
+// 1. When CAF initializes, the `__onGCastApiAvailable` is called.
+window.__onGCastApiAvailable = (isAvailable) => {
+  if (isAvailable) initCastApi();
+};
+
+function initCastApi() {
+  // 2. `CastContext` holds all global context for the CAF.
+  const context = cast.framework.CastContext.getInstance();
+
+  // 3. We use a default receiver app ID. If you want custom
+  //    styling or features, you must register your own app.
+  //
+  // @see https://developers.google.com/cast/docs/registration
+  const receiverId = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
+
+  context.setOptions({
+    receiverApplicationId: receiverId,
+  });
+
+  // 4. A `session` is a connection to a target device. Whenever its
+  //    state changes, we run the `castVideo` method.
+  context.addEventListener(
+    cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+    e => castVideo(e.sessionState),
+  );
+
+  const castVideo = async (state) => {
+    // 5. When the `session` state change event is `SESSION_STARTED`,
+    //    we try to load the video.
+    if (state === 'SESSION_STARTED') {
+      const session = context.getCurrentSession();
+      const mediaInfo = new chrome.cast.media.MediaInfo(
+        'http://example.com/video.mp4',              // Provide a URL.
+        'video/mp4; codecs="avc1.640032,mp4a.40.2"', // MIME + codecs.
+      );
+      const request = new chrome.cast.media.LoadRequest(mediaInfo);
+
+      try {
+        // 6. Instruct the receiver application to load the media,
+        //    if it fails, be prepared to handle the error.
+        await session.loadMedia(request);
+      } catch (error) { /* Handle the error. */ }
+    }
+  }
+}
+</script>
+<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
+
+<video src="video.mp4"></video>
+
+<!-- Custom element defined by the framework. -->
+<google-cast-launcher></google-cast-launcher>
+```
+
+## Metadata
+
+Receiver applications may expose additional information about the media in their UI or provide additional features depending on metadata passed to them.
+
+The [Cast Application Framework] defines several [Metadata classes] that developers can use to convey information like the content title, thumbnail, release dates, authors etc.
+
+```js
+const mediaInfo = new chrome.cast.media.MediaInfo(
+  'http://example.com/video.mp4',              // Provide a URL.
+  'video/mp4; codecs="avc1.640032,mp4a.40.2"', // MIME + codecs.
+);
+
+// Image URLs need to be "wrapped" by the Image class.
+const thumbnail = new chrome.cast.Image('http://example.com/thumb.jpg');
+
+// Our video is a short clip, but if it was a full-length movie,
+// we would use `MovieMediaMetadata` here.
+mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
+mediaInfo.metadata.title = 'My Dog Chasing Geese';
+mediaInfo.metadata.images = [ thumbnail ];
+
+// mediaInfo is later used to create a `LoadRequest`
+// const request = new chrome.cast.media.LoadRequest(mediaInfo);
+```
+
+## Captions and subtitles
+
+Media can contain additional [tracks of different types]. You can use text tracks to provide captions or subtitles for your videos.
+
+```js
+const mediaInfo = new chrome.cast.media.MediaInfo(
+  'http://example.com/video.mp4',              // Provide a URL.
+  'video/mp4; codecs="avc1.640032,mp4a.40.2"', // MIME + codecs.
+);
+
+// Instantiate the Track object first.
+const captionsTrack = new chrome.cast.media.Track(
+  'captions-en', // Unique track identifier.
+  chrome.cast.media.TrackType.TEXT,
+);
+
+captionsTrack.trackContentId = 'http://example.com/captions-en.vtt';
+captionsTrack.subtype = chrome.cast.media.TextTrackType.CAPTIONS;
+captionsTrack.name = 'English CC';
+captionsTrack.language = 'en-US'; // RFC 5646 Language Tag.
+captionsTrack.trackContentType = 'text/vtt';
+
+// The `MediaInfo` object may contain several tracks of various types,
+// how and whether additional tracks are exposed in the UI depends
+// on the receiver application implementation.
+mediaInfo.tracks = [ captionsTrack ];
+
+// mediaInfo is later used to create a `LoadRequest`
+// const request = new chrome.cast.media.LoadRequest(mediaInfo);
+```
+
+## UX considerations
+
+When the casting session starts, video playback pauses in the sender application and the `<google-cast-launcher>` changes its styling to indicate the session in progress.
+
+However, in many cases it is useful to provide additional indication. One of the common patterns is to render a video overlay along with displaying a name of the device to which the media is being cast.
+
+To achieve this, we can listen for `SESSION_STATE_CHANGED` events and add or remove an overlay element when session is started and ended:
+
+```html
+<div class="cast-overlay" hidden>
+  Casting to <span class="cast-target"></span>
+</div>
+
+<script>
+  // The following code should be defined within
+  // `function initCastApi() { ... }` defined previously.
+  const context = cast.framework.CastContext.getInstance();
+
+  const overlay = document.querySelector('.cast-overlay');
+  const target = document.querySelector('.cast-target');
+
+  // Bind the overlay visibility state to session state changes.
+  context.addEventListener(
+    cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+    e => {
+      switch (e.sessionState) {
+        case 'SESSION_ENDED':
+          overlay.setAttribute('hidden', '');
+          break;
+        case 'SESSION_STARTED':
+        case 'SESSION_RESUMED':
+          const session = context.getCurrentSession();
+          target.innerText = session.getCastDevice().friendlyName;
+          overlay.removeAttribute('hidden');
+      }
+    },
+  );
+</script>
+```
+
+## What's next?
+
+In the [next article], we will shift gears and talk about media encryption and the Encrypted Media Extensions API.
+
+[Default Media Web Receiver]: https://developers.google.com/cast/docs/web_receiver#default_media_web_receiver
+[Styled Media Web Receiver]: https://developers.google.com/cast/docs/web_receiver#styled_media_web_receiver
+[register]: https://developers.google.com/cast/docs/registration
+[Cast Application Framework]: https://developers.google.com/cast/docs/web_sender
+[Metadata classes]: https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media?hl=en
+[tracks of different types]: https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media#.TrackType
+[next article]: /encrypted-media-extensions/
diff --git a/src/api/03-user-experience/index.md b/src/api/03-user-experience/index.md
new file mode 100644
index 0000000..90dfc1c
--- /dev/null
+++ b/src/api/03-user-experience/index.md
@@ -0,0 +1,6 @@
+---
+name: User Experience
+slug: user-experience
+---
+
+Unleash your videos and learn to implement autoplay, picture-in-picture and casting in ways that improve user experience.
diff --git a/src/api/04-enhancements/10-encrypted-media-extensions.md b/src/api/04-enhancements/10-encrypted-media-extensions.md
new file mode 100644
index 0000000..1600efa
--- /dev/null
+++ b/src/api/04-enhancements/10-encrypted-media-extensions.md
@@ -0,0 +1,258 @@
+---
+title: Encrypted Media Extensions
+description: |
+  Protect your content by encrypting it, then use the Encrypted Media Extensions API to securely decrypt it within your application.
+date: January 31st, 2022
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/encrypted.mp4
+    type: video/mp4; codecs="avc1.640032,mp4a.40.2"
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/artwork-512x512.png
+    type: image/png
+encryption:
+  type: org.w3.clearkey
+  src: https://storage.googleapis.com/kino-assets/encrypted-media-extensions/encrypted.mp4
+  mimeCodec: video/mp4; codecs="avc1.640032, mp4a.40.2"
+  mediaKeySystemConfig:
+    initDataTypes:
+      - cenc
+    videoCapabilities:
+      - contentType: video/mp4; codecs="avc1.640032"
+    audioCapabilities:
+      - contentType: audio/mp4; codecs="mp4a.40.2"
+  key:
+    id: 279926496a7f5d25da69f2b3b216bfa6
+    value: ccc0f2b3b279926496a7f5d25da692f6
+---
+
+## Introduction
+
+Web developers use tags like `<video>` and `<audio>` to embed media files on web pages. Browsers then offer users options of what to do with these embeds. One of those options is to download the media file, share it with others and play it back locally at any later time.
+
+This default behavior is too permissive for many use cases, though. This is where the Encrypted Media Extensions API comes into play.
+
+## Securing video playback
+
+The simplest way to protect any data from being viewable is encryption. Even if you download an encrypted media file, you are going to need a key to actually play it.
+
+**Try it:** [Download this video](https://storage.googleapis.com/kino-assets/encrypted-media-extensions/encrypted.mp4) and try playing it in any video player on your device. You'll notice you won't be able to. But when you run the same video in this application, it plays just fine.
+
+The [Encrypted Media Extensions API] allows applications to decrypt media on the fly. It handles media keys and license exchange and can also directly render the media.
+
+The main components the Encrypted Media Extensions API interacts with are:
+
+* **Application:** Your video application, usually written in HTML5 and JS.
+* **Key System:** A decryption or protection system, e.g. Clear Key, Widevine etc.
+* **License Server:** Static data or a web server returning the decrpytion keys.
+* **Content Decryption Module (CDM):** Software or firmware decrypting the media.
+
+**Note:** Some CDM systems have direct access to the device's hardware. Those systems don't return decrypted data back to the browser. Instead they decrypt, decode and output the media themselves.
+
+Check out the diagram in the Encrypted Media Extensions [specification] for a detailed overview of the decryption flow.
+
+## Encrypting video
+
+To encrypt a video file, you need a few things:
+
+* The **video** in an appropriate format.
+* One of more **cipher keys** to be used for encyrption.
+* Decision on which **encryption method** you want to use.
+
+We already [discussed video formats] and determined that a safe common denominator for most simple use cases is using the Common Media Application Format (CMAF), i.e. fragmented MP4 files.
+
+Moreover, to improve interoperability between different key systems, a standard called **Common Encryption (CENC)** emerged that defines allowed decryption and encryption techniques as well as a common format for key mapping.
+
+In a real world commercial application, source video files would almost always be encoded, encrypted and packaged using tools like [Shaka Packager] into one or more streaming formats. However, for demonstration purposes, we'd want to keep things simple and just encrypt a single MP4 file.
+
+First, you should take a look if your source MP4 file is fragmented. To find out, you can use the [mp4info] CLI tool from the [Bento4 toolkit].
+
+```
+$ mp4info video.mp4
+
+File:
+  major brand:      iso5
+  minor version:    200
+  compatible brand: iso6
+  compatible brand: mp41
+  fast start:       yes
+
+Movie:
+  duration:   0 (media timescale units)
+  duration:   0 (ms)
+  time scale: 1000
+  fragments:  yes   <----   THIS IS WHAT YOU'RE LOOKING FOR
+
+Found 2 Tracks
+...
+...
+```
+
+If your file is not already fragmented, you can use ffmpeg to fragment it:
+
+```
+ffmpeg -i video.mp4
+  -vcodec copy -acodec copy
+  -movflags frag_keyframe+empty_moov+default_base_moof
+  fragmented.mp4
+```
+
+Then you should decide which key system you're going to use. In this tutorial we will be using a ClearKey protection just to illustrate the basic concepts of Encrypted Media Extensions usage.
+
+**Note:** ClearKey protection does not hide the keys from users. In fact the keys are going to be easily obtainable from the license server or the application source code. To ensure your keys are not exposed to users, use a content protection system like [Widevine].
+
+Because CENC requires us to use some variant of AES-128 encryption, both our key ID and the key itself are going to be 128 bits long. You can use a random sequence of 128 bits in this case, because the cipher is symmetric and we use the same key to encrypt and decrypt the data.
+
+```
+$ openssl rand -hex 16
+c77fee35e51fd615a7b91afcb1091c5e <--- OUR KEY ID
+
+$ openssl rand -hex 16
+eecdb2b549f02a7c97ce50c17f494ca0 <--- OUR KEY DATA
+```
+
+Then we're going to encrypt the video using the [mp4encrypt] tool from the Bento4 toolkit:
+
+```
+mp4encrypt
+  --method MPEG-CENC
+  --key 1:eecdb2b549f02a7c97ce50c17f494ca0:random
+  --property 1:KID:c77fee35e51fd615a7b91afcb1091c5e
+  --key 2:9abb7ab6cc4ad3b86c2193dadb1e786c:random
+  --property 2:KID:045f7ecc35848ed7b3c012ea7614422f
+  --global-option mpeg-cenc.eme-pssh:true
+  fragmented.mp4 encrypted.mp4
+```
+
+**Note:** The example above uses two different keys. One encrypts the video track (track #1) and the other encrypts audio (track #2).
+
+Now your MP4 file is encrypted and ready to be played back in the browser using the [Encrypted Media Extensions API].
+
+## Encrypted Media Extensions API usage
+
+When web browsers download the `encrypted.mp4` file, they will determine the file is encrypted. The [PSSH box] included in the MP4 file also contains list of IDs of keys necessary to decrypt the video.
+
+This information is sent to the ClearKey CDM, which in turn requests a license (i.e. the actual keys) from our application. In our case, the decryption keys are stored as plain text in the application.
+
+This allows us to directly satisfy the license request without the use of any license server.
+
+```js
+/**
+ * KID:key pairs as non-padded base64 values.
+ */
+const KEYS = {
+  x3_uNeUf1hWnuRr8sQkcXg: '7s2ytUnwKnyXzlDBf0lMoA',
+  'BF9-zDWEjtezwBLqdhRCLw': 'mrt6tsxK07hsIZPa2x54bA',
+};
+
+/**
+ * Generates a license for the given key IDs ("kids").
+ *
+ * @link https://www.w3.org/TR/encrypted-media/#clear-key-request-format
+ * @link https://www.w3.org/TR/encrypted-media/#clear-key-license-format
+ *
+ * @param {Uint8Array} message Key session message.
+ * @returns {Uint8Array} License data.
+ */
+const generateLicense = (message) => {
+  const request = JSON.parse(new TextDecoder().decode(message));
+  const keys = [];
+
+  request.kids.forEach((kid) => {
+    keys.push({
+      kty: 'oct',
+      alg: 'A128KW',
+      kid,
+      k: KEYS[kid],
+    });
+  });
+
+  return new TextEncoder().encode(JSON.stringify({
+    keys,
+  }));
+};
+
+const video = document.querySelector('video');
+
+/**
+ * When browser encounters a PSSH box in the MP4 file,
+ * it will emit an `encrypted` event and include any initData
+ * that will be used by CDM to generate the license request.
+ */
+video.addEventListener(
+  'encrypted',
+  async ({ initDataType, initData }) => {
+    const mediaKeySystemAccess = await navigator.requestMediaKeySystemAccess(
+      'org.w3.clearkey',
+      [
+        {
+          initDataTypes: ['cenc'],
+          videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.640032"' }],
+          audioCapabilities: [{ contentType: 'audio/mp4; codecs="mp4a.40.2"' }],
+        }
+      ],
+    );
+
+    const mediaKeys = await mediaKeySystemAccess.createMediaKeys();
+    await video.setMediaKeys(mediaKeys);
+    const keySession = mediaKeys.createSession();
+
+    keySession.addEventListener('message', async (e) => {
+      const license = generateLicense(e.message);
+      await keySession.update(license).catch( /* Handle error. */ );
+    }, false);
+
+    /**
+     * This will prompt the CDM to generate a license request.
+     */
+    await keySession.generateRequest(initDataType, initData);
+  }
+);
+```
+
+**Note:** The `<video>` source should not be a static file. Instead web browsers usually require that the [Media Source Extensions API] is used to read the encrypted video data.
+
+## What's Next?
+
+[In the next article] we're going to open the topic of playback performance and talk about the Video Playback Quality API and the Media Capabilities API.
+
+[Encrypted Media Extensions API]: https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API
+[specification]: https://www.w3.org/TR/encrypted-media/#introduction
+[Shaka Packager]: https://github.com/google/shaka-packager
+[discussed video formats]: /streaming-basics/#media-chunks-format
+[mp4info]: https://www.bento4.com/documentation/mp4info/
+[Bento4 toolkit]: https://www.bento4.com/documentation/
+[Widevine]: https://www.widevine.com/
+[mp4encrypt]: https://www.bento4.com/documentation/mp4encrypt/
+[PSSH box]: https://www.w3.org/TR/eme-stream-mp4/#init-data
+[license format]: https://www.w3.org/TR/encrypted-media/#clear-key-license-format
+[Media Source Extensions API]: /streaming-basics/#media-source-extensions
+[In the next article]: /playback-performance/
diff --git a/src/api/04-enhancements/11-playback-performance.md b/src/api/04-enhancements/11-playback-performance.md
new file mode 100644
index 0000000..a17b6f7
--- /dev/null
+++ b/src/api/04-enhancements/11-playback-performance.md
@@ -0,0 +1,132 @@
+---
+title: Playback Performance
+description: |
+  Use the Media Capabilities and the Video Playback Quality APIs to estimate and measure playback efficiency and smoothness.
+date: February 18, 2022
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/playback-performance/manifest.mpd
+    type: application/dash+xml
+    cast: true
+  - src: https://storage.googleapis.com/kino-assets/playback-performance/master.m3u8
+    type: application/x-mpegURL
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/playback-performance/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/playback-performance/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/playback-performance/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/playback-performance/artwork-512x512.png
+    type: image/png
+stats: true
+---
+
+## Introduction
+
+Not all devices are able to play all video sources smoothly at all times.
+
+* Older hardware may not be able to decode high resolution video quickly enough.
+* Mobile device performance may be different in battery saving modes.
+* Not all devices can use hardware acceleration to decode all video codecs.
+
+Assuming you have encoded your video in multiple resolutions and codecs, you should now decide which source you'll serve by default in each device context.
+
+To help you choose, there are two browser APIs able to give insights into video playback performance:
+
+* [Media Capabilities API]: To obtain device's media decoding capabilities.
+* [Video Playback Quality API]: To get playback quality metrics for a playing video.
+
+**Try it:** Play the video on this page. Notice the overlay that displays live values returned by the two APIs.
+
+## Media Capabilities API
+
+The [decodingInfo] method of the [Media Capabilities API] accepts a media configuration object and returns information about whether such media playback is going to be `supported`, `smooth` and `powerEfficient`.
+
+```js
+const isSupported = (
+  'mediaCapabilities' in navigator
+  && 'decodingInfo' in navigator.mediaCapabilities
+);
+
+// Note: Use `isSupported` to bypass the logic below
+//       if the Media Capabilities API is not supported.
+
+const mediaConfiguration = {
+    "type": "media-source", // Use "file" for a plain file playback.
+    "video": {
+        "contentType": "video/webm; codecs=\"vp09.00.40.08\"",
+        "width": 1920,
+        "height": 1080,
+        "bitrate": 3000000,
+        "framerate": 23.976023976023978
+    },
+    "audio": {
+        "contentType": "audio/mp4; codecs=\"mp4a.40.2\"",
+        "bitrate": 128000,
+        "samplerate": 44100,
+        "channels": 2
+    }
+}
+
+navigator.mediaCapabilities.decodingInfo(mediaConfiguration).then(
+  result => {
+    console.log(`Supported: ${result.supported}`);
+    console.log(`Smooth: ${result.smooth}`);
+    console.log(`Power efficient: ${result.powerEfficient}`);
+  }
+)
+```
+
+**Note:** There is also an [encodingInfo] method available in some browsers that will return the same type of information for media encoding capabilities of the current device.
+
+## Video Playback Quality API
+
+There is a [VideoPlaybackQuality object] associated with every `<video>` element. The `VideoPlaybackQuality` object contains a couple of key, live video metrics you can use to determine whether the current video playback is smooth.
+
+```js
+const video = document.querySelector('video');
+const vq = video.getVideoPlaybackQuality();
+
+// Print the number of total created frames
+// and dropped frames every second.
+setInterval(() => {
+  console.log(`Total frames: ${vq.totalVideoFrames}`);
+  console.log(`Dropped frames: ${vq.droppedVideoFrames}`);
+}, 1000);
+```
+
+Data returned by the `VideoPlaybackQuality` object allows you to switch video source to a less demanding one in cases when the target device struggles to decode the data stream in time.
+
+## What's Next?
+
+Next we will [explore the Background Fetch API]. You'll learn how to initiate and handle media downloads that run in the background without depending on your web application being loaded by the browser.
+
+[Media Capabilities API]: https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities
+[Video Playback Quality API]: https://developer.mozilla.org/en-US/docs/Web/API/VideoPlaybackQuality
+[decodingInfo]: https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities/decodingInfo
+[encodingInfo]: https://developer.mozilla.org/en-US/docs/Web/API/MediaCapabilities/encodingInfo
+[VideoPlaybackQuality object]: https://developer.mozilla.org/en-US/docs/Web/API/VideoPlaybackQuality
+[explore the Background Fetch API]: /background-fetch-api/
diff --git a/src/api/04-enhancements/12-background-fetch-api.md b/src/api/04-enhancements/12-background-fetch-api.md
new file mode 100644
index 0000000..ca81692
--- /dev/null
+++ b/src/api/04-enhancements/12-background-fetch-api.md
@@ -0,0 +1,165 @@
+---
+title: Background Fetch
+description: |
+  Use the Background Fetch API to download large files in the background while exposing the download progress to the user.
+date: February 22, 2022
+length: '1:04'
+video-sources:
+  - src: https://storage.googleapis.com/kino-assets/background-fetch-api/manifest.mpd
+    type: application/dash+xml
+    cast: true
+  - src: https://storage.googleapis.com/kino-assets/background-fetch-api/master.m3u8
+    type: application/x-mpegURL
+video-subtitles:
+  - default: true
+    kind: captions
+    label: English
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/cap-en.vtt
+    srclang: en
+  - default: false
+    kind: captions
+    label: Česky
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/cap-cs.vtt
+    srclang: cz
+thumbnail: https://storage.googleapis.com/kino-assets/background-fetch-api/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/background-fetch-api/artwork-512x512.png
+    type: image/png
+---
+
+## Introduction
+
+Web applications use the [Fetch API] to fetch resources, including file downloads, from the network. However if the user closes the application web page or navigates away, all in progress `fetch` requests are interrupted and the download halts.
+
+The [Background Fetch API] allows web applications to offload a download operation to the browser. The browser exposes some UI to indicate that a download is in progress. When all files are downloaded, it exposes the downloaded data to your service worker.
+
+[Background Fetch API] allows you to batch files into a single download operation. This is especially useful for downloading media, particularly for downloading streaming formats like MPEG DASH that often serve a single media item split into tens or even hundreds of chunks, each in its own file.
+
+## Initiate the download
+
+Your application needs to have a registered service worker in order to use the [Background Fetch API]. You will also need to make sure the API is supported in the user's browser before you use it.
+
+```js
+if (!('BackgroundFetchManager' in self)) {
+  // Use the Fetch API instead to download the files.
+}
+```
+
+Assuming the current browser supports the Background Fetch API, you should first obtain a `ServiceWorkerRegistration` instance and then use its `backgroundFetch` property to initialize the background fetch operation.
+
+```js
+navigator.serviceWorker.ready.then(async (swReg) => {
+  const bgFetch = await swReg.backgroundFetch.fetch(
+    // Provide your own meaningful ID.
+    'my-video-id',
+
+    // Array of file URLs to be downloaded.
+    [
+      '/static/video-chunk-1.mp4',
+      '/static/video-chunk-2.mp4',
+      '/static/video-chunk-3.mp4',
+      '/static/video-chunk-4.mp4',
+      '/static/video-thumbnail.jpg',
+    ],
+
+    // Browsers may use these options
+    // to provide users with more information
+    // about the object being downloaded.
+    //
+    // Note: All options are optional.
+    {
+      title: 'My Video: Chunk Funk',
+      icons: [{
+        sizes: '300x300',
+        src: '/video-icon-300x300.png',
+        type: 'image/png',
+      }],
+
+      // Total size of the downloaded
+      // resources in bytes.
+      downloadTotal: 60 * 1024 * 1024,
+    }
+  );
+});
+```
+
+## Access downloaded data
+
+Once the background fetch is initialized, the browser will expose some kind of progress indication to the user. The download will now continue even if the user closes the application or navigates away.
+
+After all files finish downloading, the browser is going to trigger a `backgroundfetchsuccess` event in your service worker context. This gives you an opportunity to access the downloaded data.
+
+```js
+// In the service worker ↓
+
+addEventListener('backgroundfetchsuccess', (event) => {
+  // The `BackgroundFetchRegistration` instance.
+  const bgFetch = event.registration;
+
+  event.waitUntil(async function() {
+    // Returns an array of `BackgroundFetchRecord` objects.
+    const records = await bgFetch.matchAll();
+
+    const promises = records.map(async (record) => {
+      const response = await record.responseReady;
+
+      // TODO: Store the response object using the Cache or IndexedDB API
+    });
+
+    // Wait until all responses are ready and saved locally
+    await Promise.all(promises);
+
+    // Use the `updateUI` method to change
+    // the initially set `title` or `icons`.
+    event.updateUI({
+      title: 'My Video stored for offline playback'
+    });
+  }());
+});
+```
+
+**Note:** In case one or more of the downloaded files can't be fetched or when the user actively aborts the download operation, a `backgroundfetchfailure` or `backgroundfetchabort` respectively will be triggered instead.
+
+## Tracking progress
+
+You can track the download progress via a `progress` event. Note that `downloadTotal` is going to be `0` if you didn't provide a value when initializing the background fetch operation.
+
+```js
+// In the service worker ↓
+
+bgFetch.addEventListener('progress', () => {
+  // If we didn't provide a total, we can't provide a %.
+  if (!bgFetch.downloadTotal) return;
+
+  const ratio = bgFetch.downloaded / bgFetch.downloadTotal;
+  const percent = Math.round(ratio * 100);
+
+  console.log(`Download progress: ${percent}%`);
+});
+```
+
+## Try it!
+
+Go to [Kino Settings] and enable the _Download videos in the background_ feature. Then try to download any of the videos using the _Make available offline_ button under any of the videos on this site. If your [browser supports the Background Fetch API], you'll notice it downloads the video using its own UI.
+
+[Fetch API]: https://developers.google.com/web/updates/2015/03/introduction-to-fetch
+[Background Fetch API]: https://wicg.github.io/background-fetch/
+[service worker]: https://developers.google.com/web/fundamentals/primers/service-workers
+[Kino Settings]: /settings/
+[browser supports the Background Fetch API]: https://caniuse.com/mdn-api_serviceworkerregistration_backgroundfetch
diff --git a/src/api/04-enhancements/index.md b/src/api/04-enhancements/index.md
new file mode 100644
index 0000000..b86aee1
--- /dev/null
+++ b/src/api/04-enhancements/index.md
@@ -0,0 +1,6 @@
+---
+name: Enhancements
+slug: enhancements
+---
+
+Use several more advanced media APIs implemented in the browsers today to make your video applications even more robust.
\ No newline at end of file
diff --git a/src/js/constants.js b/src/js/constants.js
index 7dd0a04..fcf8f58 100644
--- a/src/js/constants.js
+++ b/src/js/constants.js
@@ -138,3 +138,9 @@ export const CAST_CLASSNAME = 'cast';
 export const CAST_HAS_TARGET_NAME = 'cast-has-target';
 export const CAST_TARGET_NAME = 'cast-target-name';
 export const CAST_BUTTON_HIDDEN_CLASSNAME = 'hidden';
+
+/**
+ * Stats overlay.
+ */
+export const STATS_OVERLAY_CLASSNAME = 'stats-overlay';
+export const STATS_OVERLAY_DISPLAYED_CLASSNAME = 'stats-overlay-visible';
diff --git a/src/js/sw/cache.js b/src/js/sw/cache.js
index cdd5ed3..1d98486 100644
--- a/src/js/sw/cache.js
+++ b/src/js/sw/cache.js
@@ -43,4 +43,10 @@ export default [
   'https://storage.googleapis.com/kino-assets/streaming-basics/thumbnail.png',
   'https://storage.googleapis.com/kino-assets/efficient-formats/thumbnail.png',
   'https://storage.googleapis.com/kino-assets/adaptive-streaming/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/autoplay/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/picture-in-picture/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/google-cast/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/encrypted-media-extensions/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/playback-performance/thumbnail.png',
+  'https://storage.googleapis.com/kino-assets/background-fetch-api/thumbnail.png',
 ];
diff --git a/src/js/utils/decryptVideo.js b/src/js/utils/decryptVideo.js
new file mode 100644
index 0000000..18d4bb6
--- /dev/null
+++ b/src/js/utils/decryptVideo.js
@@ -0,0 +1,146 @@
+/**
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Converting a regular MP4 video to an encrypted one that will actually
+ * play in browsers using MSE+EME is a two-step process.
+ *
+ * First, we need to fragment the video if its not fragmented already:
+ *
+ * ```
+ * ffmpeg -i video.mp4 -vcodec copy -acodec copy
+ * -movflags frag_keyframe+empty_moov+default_base_moof fragmented.mp4
+ * ```
+ *
+ * Then, we need to encrypt the fragmented video and make sure the encrypted MP4
+ * contains the PSSH atom. We use Bento4's `mp4encrypt` tool to do this:
+ *
+ * ```
+ * mp4encrypt
+ *  --method MPEG-CENC
+ *  --key 1:eecdb2b549f02a7c97ce50c17f494ca0:random
+ *  --property 1:KID:c77fee35e51fd615a7b91afcb1091c5e
+ *  --key 2:9abb7ab6cc4ad3b86c2193dadb1e786c:random
+ *  --property 2:KID:045f7ecc35848ed7b3c012ea7614422f
+ *  --global-option mpeg-cenc.eme-pssh:true fragmented.mp4 encrypted.mp4
+ * ```
+ *
+ * This example expects the media file to contain exactly two tracks. In our case
+ * track `1` is the video, track `2` the audio.
+ *
+ * Substitute your own keys and KIDs – 32 hex characters each.
+ *
+ * {@link https://ffmpeg.org/}
+ * {@link https://www.bento4.com/documentation/mp4encrypt/}
+ */
+
+/**
+ * KID:key pairs as non-padded base64 values.
+ */
+const KEYS = {
+  x3_uNeUf1hWnuRr8sQkcXg: '7s2ytUnwKnyXzlDBf0lMoA',
+  'BF9-zDWEjtezwBLqdhRCLw': 'mrt6tsxK07hsIZPa2x54bA',
+};
+
+/**
+ * Generates a license for the given key IDs ("kids").
+ *
+ * @param {Uint8Array} message Key session message.
+ * @returns {Uint8Array} License data.
+ */
+const generateLicense = (message) => {
+  const request = JSON.parse(new TextDecoder().decode(message));
+  const keys = [];
+
+  request.kids.forEach((kid) => {
+    keys.push({
+      kty: 'oct',
+      alg: 'A128KW',
+      kid,
+      k: KEYS[kid],
+    });
+  });
+
+  return new TextEncoder().encode(JSON.stringify({
+    keys,
+  }));
+};
+
+/**
+ * Uses Encrypted Media Extensions to decrypt the video.
+ *
+ * @param {HTMLMediaElement} videoElement                    Video element.
+ * @param {object}           encryption                      Encryption data.
+ * @param {string}           encryption.src                  Encrypted video source URL.
+ * @param {string}           encryption.type                 Encryption type.
+ * @param {string}           encryption.mimeCodec            Media MIME type and codec string.
+ * @param {object}           encryption.mediaKeySystemConfig Key system config.
+ * @param {object}           [encryption.key]                Encryption key.
+ * @param {string}           [encryption.key.id]             Key ID as a hexadecimal string.
+ * @param {string}           [encryption.key.value]          Key value as a hexadecimal string.
+ * @returns {void}
+ */
+export default function decryptVideo(videoElement, encryption) {
+  const handleEncrypted = async ({ initDataType, initData }) => {
+    const mediaKeySystemAccess = await navigator.requestMediaKeySystemAccess(
+      encryption.type,
+      [encryption.mediaKeySystemConfig],
+    );
+    const mediaKeys = await mediaKeySystemAccess.createMediaKeys();
+    await videoElement.setMediaKeys(mediaKeys);
+
+    const keySession = mediaKeys.createSession();
+    keySession.addEventListener('message', async (e) => {
+      const license = generateLicense(e.message);
+      await keySession.update(license).catch(
+        /* eslint-disable-next-line no-console */
+        (updateError) => console.error(`keySession.update() failed with error: ${updateError}`),
+      );
+    }, false);
+    await keySession.generateRequest(initDataType, initData);
+  };
+
+  videoElement.addEventListener('encrypted', handleEncrypted, false);
+
+  if ('MediaSource' in window && MediaSource.isTypeSupported(encryption.mimeCodec)) {
+    const mediaSource = new MediaSource();
+    videoElement.src = URL.createObjectURL(mediaSource);
+
+    mediaSource.addEventListener('sourceopen', () => {
+      const sourceBuffer = mediaSource.addSourceBuffer(encryption.mimeCodec);
+
+      fetch(encryption.src).then((response) => {
+        response.arrayBuffer().then((arrayBuffer) => {
+          sourceBuffer.addEventListener(
+            'updateend',
+            () => {
+              if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+                mediaSource.endOfStream();
+              }
+            },
+            false,
+          );
+          sourceBuffer.appendBuffer(arrayBuffer);
+        });
+      })
+        /* eslint-disable-next-line no-console */
+        .catch((e) => console.error(`Encrypted media fetch failed with error: ${e}`));
+    });
+  } else {
+    /* eslint-disable-next-line no-console */
+    console.error('Unsupported MIME type or codec: ', encryption.mimeCodec);
+  }
+}
diff --git a/src/js/web-components/video-player/VideoPlayer.css b/src/js/web-components/video-player/VideoPlayer.css
index 8ef7ffa..0a95094 100644
--- a/src/js/web-components/video-player/VideoPlayer.css
+++ b/src/js/web-components/video-player/VideoPlayer.css
@@ -86,6 +86,36 @@ video {
   display: inline;
 }
 
+.stats-overlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  right: auto;
+  bottom: auto;
+  max-height: 65%;
+  max-width: 100%;
+  overflow: auto;
+  z-index: 1;
+  background-color: var(--code-background);
+  color: var(--icon);
+  padding: 1em;
+  opacity: 0.9;
+  box-sizing: border-box;
+}
+
+.stats-overlay h4 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.stats-overlay h4:first-child {
+  margin-top: 0;
+}
+
+:host(.stats-overlay-visible) .stats-overlay {
+  display: block;
+}
+
 @media (min-width: 720px) {
   :host(.picture-in-picture) .pip-overlay {
     row-gap: 32px;
@@ -93,4 +123,9 @@ video {
   :host(.cast) .cast-overlay {
     row-gap: 32px;
   }
+  .stats-overlay {
+    inset: 1em;
+    right: auto;
+    bottom: auto;
+  }
 }
diff --git a/src/js/web-components/video-player/VideoPlayer.js b/src/js/web-components/video-player/VideoPlayer.js
index b7d7914..811f777 100644
--- a/src/js/web-components/video-player/VideoPlayer.js
+++ b/src/js/web-components/video-player/VideoPlayer.js
@@ -25,7 +25,12 @@ import {
   CAST_TARGET_NAME,
   MEDIA_SESSION_DEFAULT_ARTWORK,
   PIP_CLASSNAME,
+  STATS_OVERLAY_CLASSNAME,
+  STATS_OVERLAY_DISPLAYED_CLASSNAME,
 } from '../../constants';
+import decryptVideo from '../../utils/decryptVideo';
+import { getMediaConfigurationAudio, getMediaConfigurationVideo } from '../../utils/getMediaConfiguration';
+import getDecodingInfo from '../../utils/getDecodingInfo';
 
 export default class VideoPlayer extends HTMLElement {
   /**
@@ -118,6 +123,7 @@ export default class VideoPlayer extends HTMLElement {
       <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-miterlimit="10"><path d="M34.133 107.201c0-13.253-10.747-24-24-24M53.333 107.2c0-23.861-19.339-43.2-43.2-43.2" fill="none" stroke="var(--icon)" stroke-width="8"/><path d="M10.133 112.001a4.8 4.8 0 1 0 0-9.6 4.8 4.8 0 0 0 0 9.6Z" fill="var(--icon)" fill-rule="nonzero"/><path d="M5.333 49.778V32c0-5.891 4.776-10.667 10.667-10.667h96c5.891 0 10.667 4.776 10.667 10.667v64c0 5.891-4.776 10.667-10.667 10.667H72.381" fill="none" stroke="var(--icon)" stroke-width="8"/></svg>
       <p>Casting<span class="cast-target"> to <span class="cast-target-name"></span></span></p>
     </div>
+    <div class="stats-overlay">STATS OVERLAY</div>
     `;
 
     while (this.internal.root.firstChild) {
@@ -131,91 +137,27 @@ export default class VideoPlayer extends HTMLElement {
     this.videoElement = this.internal.root.querySelector('video');
     this.videoElement.addEventListener('error', this.handleVideoError.bind(this), true);
 
-    const pipButton = this.createPiPButton();
+    if (videoData.encryption) {
+      decryptVideo(this.videoElement, videoData.encryption);
+    }
+
     const floatingButtonsBar = this.internal.root.querySelector('.floating-buttons');
+    const pipButton = this.createPiPButton();
 
     if (pipButton) {
       floatingButtonsBar.appendChild(pipButton);
     }
 
-    window.kinoInitGoogleCast().then((castButton) => {
-      floatingButtonsBar.appendChild(castButton);
-
-      window.cast.framework.CastContext.getInstance().addEventListener(
-        window.cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
-        async (e) => {
-          if (e.sessionState === 'SESSION_STARTED' || e.sessionState === 'SESSION_RESUMED') {
-            const castableSources = this.internal.videoData['video-sources'].filter((source) => source.cast === true);
-
-            if (!castableSources) {
-              /* eslint-disable-next-line no-console */
-              console.error('[Google Cast] The media has no source suitable for casting.');
-              return;
-            }
-
-            const castSession = window.cast.framework.CastContext.getInstance().getCurrentSession();
-            const mediaInfo = new window.chrome.cast.media.MediaInfo(
-              castableSources[0].src,
-              castableSources[0].type,
-            );
-            const videoThumbnail = new window.chrome.cast.Image(this.internal.videoData.thumbnail);
-            const metadata = new window.chrome.cast.media.GenericMediaMetadata();
-
-            metadata.title = videoData.title;
-
-            /**
-             * @todo Add the Media Session artwork and define image dimensions explicitly.
-             */
-            metadata.images = [videoThumbnail];
-            mediaInfo.metadata = metadata;
-
-            /** @type {Array} */
-            const subtitles = this.internal.videoData['video-subtitles'] || [];
-            const defaultSubtitles = subtitles.find((subtitle) => subtitle.default);
-
-            /**
-             * AFAICT the Default Media Receiver doesn't implement any UI to
-             * select the subtitle track.
-             *
-             * We only add the subtitle track if there is a default one.
-             */
-            if (defaultSubtitles) {
-              const defaultSubtitlesTrack = new window.chrome.cast.media.Track(
-                1,
-                window.chrome.cast.media.TrackType.TEXT,
-              );
-
-              defaultSubtitlesTrack.trackContentId = defaultSubtitles.src;
-              defaultSubtitlesTrack.subtype = window.chrome.cast.media.TextTrackType.SUBTITLES;
-              defaultSubtitlesTrack.name = defaultSubtitles.label;
-              defaultSubtitlesTrack.language = defaultSubtitles.srclang;
-              defaultSubtitlesTrack.trackContentType = 'text/vtt';
-
-              mediaInfo.tracks = [defaultSubtitlesTrack];
-            }
-
-            const request = new window.chrome.cast.media.LoadRequest(mediaInfo);
-
-            try {
-              await castSession.loadMedia(request);
-            } catch (error) {
-              /* eslint-disable-next-line no-console */
-              console.error(`[Google Cast] Error code: ${error}`);
-              return;
-            }
-
-            const targetName = castSession.getCastDevice().friendlyName;
-            this.internal.root.querySelector(`.${CAST_TARGET_NAME}`).innerText = targetName;
-            this.classList.toggle(CAST_HAS_TARGET_NAME, targetName);
-            this.classList.add(CAST_CLASSNAME);
-          }
+    if (this.internal.videoData.cast) {
+      window.kinoInitGoogleCast().then((castButton) => {
+        floatingButtonsBar.appendChild(castButton);
 
-          if (e.sessionState === 'SESSION_ENDED') {
-            this.classList.remove(CAST_CLASSNAME);
-          }
-        },
-      );
-    });
+        window.cast.framework.CastContext.getInstance().addEventListener(
+          window.cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+          this.initCast.bind(this),
+        );
+      });
+    }
 
     /**
      * Set up Media Session API integration.
@@ -224,6 +166,20 @@ export default class VideoPlayer extends HTMLElement {
     this.videoElement.addEventListener('play', () => {
       if (!this.internal.mediaSessionIsInit) this.initMediaSession();
     });
+
+    /**
+     * Set up the stats overlay.
+     */
+    if (this.internal.videoData.stats) {
+      this.videoElement.addEventListener(
+        'play',
+        () => this.classList.add(STATS_OVERLAY_DISPLAYED_CLASSNAME),
+        { once: true },
+      );
+
+      this.videoElement.addEventListener('playing', this.updateStatsOverlay.bind(this));
+      this.videoElement.addEventListener('timeupdate', this.updateStatsOverlay.bind(this));
+    }
   }
 
   /**
@@ -447,6 +403,10 @@ export default class VideoPlayer extends HTMLElement {
     if (!('pictureInPictureEnabled' in document)) {
       return null;
     }
+    if (!this.internal.videoData.pip) {
+      return null;
+    }
+
     const ENTER_PIP_SVG = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 15v6a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 21V8.25A1.5 1.5 0 0 1 3 6.75h3.75" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.75 3v7.5a1.5 1.5 0 0 0 1.5 1.5H21a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 21 1.5h-9.75A1.5 1.5 0 0 0 9.75 3Z" stroke="var(--accent)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square"/><path d="M9 18.75V15H5.25M5.25 18.75 9 15" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
     const LEAVE_PIP_SVG = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 9V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v12.75a1.5 1.5 0 0 0 1.5 1.5h3.75" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.25 9V5.25H9M9 9 5.25 5.25" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.75 21v-7.5a1.5 1.5 0 0 1 1.5-1.5H21a1.5 1.5 0 0 1 1.5 1.5V21a1.5 1.5 0 0 1-1.5 1.5h-9.75a1.5 1.5 0 0 1-1.5-1.5Z" stroke="var(--accent)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square"/></svg>';
 
@@ -495,4 +455,145 @@ export default class VideoPlayer extends HTMLElement {
 
     return pipButton;
   }
+
+  /**
+   * Initializes Google Cast functionality.
+   *
+   * @param {SessionStateEventData} e SessionStateEventData instance.
+   * @returns {void}
+   */
+  async initCast(e) {
+    if (e.sessionState === 'SESSION_STARTED' || e.sessionState === 'SESSION_RESUMED') {
+      const castableSources = this.internal.videoData['video-sources'].filter((source) => source.cast === true);
+
+      if (!castableSources) {
+        /* eslint-disable-next-line no-console */
+        console.error('[Google Cast] The media has no source suitable for casting.');
+        return;
+      }
+
+      const castSession = window.cast.framework.CastContext.getInstance().getCurrentSession();
+      const mediaInfo = new window.chrome.cast.media.MediaInfo(
+        castableSources[0].src,
+        castableSources[0].type,
+      );
+      const videoThumbnail = new window.chrome.cast.Image(this.internal.videoData.thumbnail);
+      const metadata = new window.chrome.cast.media.GenericMediaMetadata();
+
+      metadata.title = this.internal.videoData.title;
+
+      /**
+       * @todo Add the Media Session artwork and define image dimensions explicitly.
+       */
+      metadata.images = [videoThumbnail];
+      mediaInfo.metadata = metadata;
+
+      /** @type {Array} */
+      const subtitles = this.internal.videoData['video-subtitles'] || [];
+      const defaultSubtitles = subtitles.find((subtitle) => subtitle.default);
+
+      /**
+       * AFAICT the Default Media Receiver doesn't implement any UI to
+       * select the subtitle track.
+       *
+       * We only add the subtitle track if there is a default one.
+       */
+      if (defaultSubtitles) {
+        const defaultSubtitlesTrack = new window.chrome.cast.media.Track(
+          1,
+          window.chrome.cast.media.TrackType.TEXT,
+        );
+
+        defaultSubtitlesTrack.trackContentId = defaultSubtitles.src;
+        defaultSubtitlesTrack.subtype = window.chrome.cast.media.TextTrackType.SUBTITLES;
+        defaultSubtitlesTrack.name = defaultSubtitles.label;
+        defaultSubtitlesTrack.language = defaultSubtitles.srclang;
+        defaultSubtitlesTrack.trackContentType = 'text/vtt';
+
+        mediaInfo.tracks = [defaultSubtitlesTrack];
+      }
+
+      const request = new window.chrome.cast.media.LoadRequest(mediaInfo);
+
+      try {
+        await castSession.loadMedia(request);
+      } catch (error) {
+        /* eslint-disable-next-line no-console */
+        console.error(`[Google Cast] Error code: ${error}`);
+        return;
+      }
+
+      const targetName = castSession.getCastDevice().friendlyName;
+      this.internal.root.querySelector(`.${CAST_TARGET_NAME}`).innerText = targetName;
+      this.classList.toggle(CAST_HAS_TARGET_NAME, targetName);
+      this.classList.add(CAST_CLASSNAME);
+    }
+
+    if (e.sessionState === 'SESSION_ENDED') {
+      this.classList.remove(CAST_CLASSNAME);
+    }
+  }
+
+  /**
+   * Updates the video playback statistics rendered on top of the video.
+   */
+  async updateStatsOverlay() {
+    let capText = '';
+    let vqText = '';
+    let mediaText = '';
+
+    const statsOverlayEl = this.internal.root.querySelector(`.${STATS_OVERLAY_CLASSNAME}`);
+
+    /** @type {VideoPlaybackQuality} */
+    const vq = this.videoElement.getVideoPlaybackQuality();
+    const vqData = [
+      ['Total frames: ', vq.totalVideoFrames],
+      ['Dropped frames: ', vq.droppedVideoFrames],
+    ];
+    vqText = vqData.map(([label, value]) => `<div>${label}${value}</div>`).join('');
+
+    const reps = this.internal.streamer?.stream?.media?.representations;
+    const selectedReps = this.internal.streamer?.stream?.media?.lastRepresentationsIds;
+
+    if (reps && selectedReps) {
+      const videoId = selectedReps.video;
+      const audioId = selectedReps.audio;
+
+      const videoRep = reps.video.find((rep) => rep.id === videoId);
+      const audioRep = reps.audio.find((rep) => rep.id === audioId);
+
+      if (videoRep && audioRep) {
+        const videoConfiguration = getMediaConfigurationVideo(videoRep);
+        const audioConfiguration = getMediaConfigurationAudio(audioRep);
+        const mediaConfiguration = { ...videoConfiguration, ...audioConfiguration };
+
+        const decodingInfo = await getDecodingInfo(mediaConfiguration);
+
+        const capData = [
+          ['Power efficient: ', decodingInfo.powerEfficient],
+          ['Smooth: ', decodingInfo.smooth],
+          ['Supported: ', decodingInfo.supported],
+        ];
+        capText = capData.map(([label, value]) => `<div>${label}${value}</div>`).join('');
+
+        const mediaData = [
+          ['Video codec: ', videoConfiguration.video.contentType],
+          ['Video resolution: ', `${videoConfiguration.video.width}x${videoConfiguration.video.height}`],
+          ['Audio codec: ', audioConfiguration.audio.contentType],
+          ['Audio bitrate: ', audioConfiguration.audio.bitrate],
+          ['Audio sampling rate: ', audioConfiguration.audio.samplerate],
+          ['Audio channels: ', audioConfiguration.audio.channels],
+        ];
+        mediaText = mediaData.map(([label, value]) => `<div>${label}${value}</div>`).join('');
+      }
+    }
+
+    statsOverlayEl.innerHTML = `
+      <h4>Media Info</h4>
+      ${mediaText}
+      <h4>Video Playback Quality API</h4>
+      ${vqText}
+      <h4>Media Capabilities API</h4>
+      ${capText}`;
+  }
 }