Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Astro JS Mux Video: using Custom Elements # Astro JS Mux Video: using Custom Elements #

blurry low resolution placeholder image Astro JS Mux Video
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Astro Astro Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Astro JS Mux Video: using Custom Elements #

Updated 5 months ago
7 minute read
Gunning Fog Index: 5
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

🔥 HTML Elements #

In this post on Astro JS Mux Video, we see how you can integrate the Mux HTML components video player into your site. We will also see that you can put a site together quite quickly with Astro. And that is without the need for learning frameworks like React and Svelte. Astro is principally a static site builder, though it also supports server rendered content. It is aligned with the islands architecture philosophy. That is where components on a page can exist and hydrate independently of each other. This is a recipe for fast sites.

Mux is a video streaming service. You upload your video in a single format, and they sweat the details of making it work with user devices, be they Android or iOS mobile, Windows, Linux, or macOS desktop. In fact, you can even have the player stream to Chromecast compatible devices. The Mux Player is a custom element or Web Component. The advantage of using Web Components is that, in theory, you can write your components once and use them in any web framework or with none at all, just like we will today!

There is minimal setup, and you really can build out an Astro site using the Mux Custom Elements video player in a matter of minutes. So let’s punch it!

🧱 Getting Started with Mux Video Player #

You do not need a Mux account if you want to follow along. As an aside, however, we see how to set one up in the Svelte Video Blog Tutorial . To play a Mux video, you just need a Mux playback ID for the video. We have a Mux promotional asset ID which we can use here for this purpose.

If you are following along, let’s start by spinning up a new Astro project from the Terminal:

    
pnpm create astro@latest astro-mux-video
cd astro-mux-video
pnpm install
pnpm astro telemetry disable
pnpm install @mux/mux-video
pnpm dev

At the time of writing, the Mux player is still in beta testing. Taking that into account, you should probably avoid using this setup for production projects.

In the block above we set up a new Astro project, disabled Astro telemetry (which is enabled by default) and installed the @mux/mux-video package in our project. Ignore the telemetry disable step if you are OK with sending data to Astro.

📀 Video Component #

The Mux Player is a Web Component. All we need to do to make it work with Astro is export the NPM package in a JavaScript (or TypeScript) file. The final step, to make sure it gets bundled with our site, is then to add a link to this file in a script tag. We will do that on our home page, which we will look at next.

Here’s the code for the Video Component. Make a src/components folder and create a mux-video.ts file in there:

src/components/mux-video.ts
typescript
    
1 export * as MuxVideo from '@mux/mux-video';

Hope that wasn’t too much typing 😅.

📼 Home Page #

Essentially, as we just mentioned, you now just need to import the component in a script tag, then add a mux-video element in the Astro markup. Here is a pared back version:

src/pages/index.astro
astro
    
1 ---
2 ---
3
4 <html lang="en">
5
6 <head>
7 <meta charset="utf-8" />
8 <meta name="viewport" content="width=device-width" />
9 <script>import '../components/mux-video.ts'</script>
10 <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
11 <title>Mux Video Player in 🖖🏽 Astro</title>
12 </head>
13
14 <body>
15 <main class="container">
16 <mux-video playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs" controls />
17 </main>
18 </body>
19
20 </html>

In line 9 we make the import mentioned. The script tag in line 10, meanwhile, adds Chromecast support — it’s that simple! The player also supports Airplay (used by Apple devices). We use minimal attributes on the mux-video element. You see, this web component does not look too different to a regular HTML component. In fact, we will see below, we can add the usual attributes we have on an HTML5 video element. We use a Mux promotional video for the playback-id here. When using your own video, You’ll notice Mux generate two IDs. It is the public playback-id rather than the master-access ID which you will need here.

💫 Levelling Up #

In the markup below, we take it up a level, adding attributes to reduce layout shift and video controls as well as some styling. We learn more about reducing cumulative shift and lazy-loading video  in the Svelte Video blog tutorial. We use SvelteKit there, though Astro works with Svelte components.

Please enable JavaScript to watch the video 📼

Astro Mux Video Player: Working Example
src/pages/index.astro — click to expand code.
src/pages/index.astro
astro
    
1 ---
2 ---
3
4 <html lang="en">
5
6 <head>
7 <meta charset="utf-8" />
8 <meta name="viewport" content="width=device-width" />
9 <link rel="icon" href="/favicon.ico" sizes="any" />
10 <link rel="icon" href="/icon.svg" type="image/svg+xml" />
11 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
12 <link rel="manifest" href="/manifest.webmanifest" />
13 <script>import '../components/mux-video.ts'</script>
14 <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
15 <title>Mux Video Player in 🖖🏽 Astro</title>
16 </head>
17
18 <body>
19 <main class="container">
20 <h1 class="heading">Mux Video Player in 🖖🏽 Astro</h1>
21 <figure>
22 <div class="video-container">
23 <mux-video playback-id="EcHgOK9coz5K4rjSwOkoE7Y7O01201YMIC200RI6lNxnhs" autoplay controls loop width="688px"
24 height="387px" poster="/mux-video-player-poster.png" preload="none" primary-color="#31274a"
25 secondary-color="#ff5d01">
26 </mux-video>
27 </div>
28 <figcaption>VIDEO CREDIT: William Ehrendreich: <a href="https://www.videvo.net/profile/williamehrendreich/"
29 rel="nofollow noopener noreferrer">www.videvo.net/profile/williamehrendreich/</a> </figcaption>
30 </figure>
31 <p>Boldly going where no video player has gone before&hellip;</p>
32 </main>
33 </body>
34
35 </html>
36
37 <style>
38 /* space-grotesk-500 - latin */
39 @font-face {
40 font-family: Space Grotesk;
41 font-style: normal;
42 font-weight: 500;
43 src: local(''),
44 url('/fonts/space-grotesk-v12-latin-500.woff2') format('woff2'),
45 /* Chrome 26+, Opera 23+, Firefox 39+ */
46 url('/fonts/space-grotesk-v12-latin-500.woff') format('woff');
47 /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
48 }
49
50 /* space-grotesk-700 - latin */
51 @font-face {
52 font-family: Space Grotesk;
53 font-style: normal;
54 font-weight: bold;
55 src: local(''),
56 url('/fonts/space-grotesk-v12-latin-700.woff2') format('woff2'),
57 /* Chrome 26+, Opera 23+, Firefox 39+ */
58 url('/fonts/space-grotesk-v12-latin-700.woff') format('woff');
59 /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
60 }
61
62 :root {
63 /* mercury */
64 --colour-light: hsl(0deg 5% 92%);
65
66 /* green spring */
67 --colour-alt: hsl(107deg 7% 74%);
68
69 /* Xiketic */
70 --colour-dark: hsl(240deg 100% 4%);
71
72 /* BlazeOrange */
73 --colour-theme: hsl(22 100% 50%);
74 }
75
76 body {
77 margin: var(--spacing-0);
78 min-height: 100vh;
79
80 --spacing-0: 0;
81 --spacing-1: 0.25rem;
82 --spacing-2: 0.5rem;
83 --spacing-12: 3rem;
84 --spacing-18: 4.5rem;
85 --max-width-wrapper: 48rem;
86
87 --font-size-root: 16px;
88 --font-size-1: 1rem;
89 --font-size-3: 1.563rem;
90 --font-size-6: 3.052rem;
91
92
93 --font-weight-medium: 500;
94 --font-weight-bold: 700;
95
96 font-family: Space Grotesk;
97 font-weight: var(--font-weight-medium);
98
99 background-color: var(--colour-dark);
100 /* CREDIT https://www.joshwcomeau.com/gradient-generator/ */
101 background-image: linear-gradient(45deg,
102 hsl(240deg 100% 4%) 0%,
103 hsl(243deg 37% 10%) 27%,
104 hsl(246deg 32% 15%) 41%,
105 hsl(253deg 31% 20%) 53%,
106 hsl(285deg 36% 26%) 64%,
107 hsl(327deg 60% 38%) 75%,
108 hsl(347deg 72% 51%) 86%,
109 hsl(22deg 100% 50%) 99%);
110 }
111
112 a {
113 color: var(--colour-theme)
114 }
115
116 .container {
117 color: var(--colour-alt);
118 width: min(100% - var(--spacing-12), var(--max-width-wrapper));
119 margin: var(--spacing-18) auto;
120 font-size: var(--font-size-3);
121 text-align: right;
122 }
123
124 .heading {
125 color: var(--colour-light);
126 text-align: center;
127 font-size: var(--font-size-6);
128 font-weight: var(--font-weight-bold);
129 margin-bottom: var(--spacing-18)
130 }
131
132 mux-video {
133 background-color: var(--colour-theme);
134 }
135
136 .video-container,
137 mux-video {
138 max-width: var(--max-width-full);
139 aspect-ratio: 16 / 9;
140 }
141
142 figure {
143 margin-bottom: var(--spacing-12);
144 text-align: left;
145 }
146
147 figcaption {
148 font-size: var(--font-size-1);
149 margin-block: var(--spacing-2);
150 }
151 </style>

I added self-hosted fonts here. For this to work, you need to download them from google-webfonts-helper , then extract the zip and place the .woff and .woff2 files in a new public/fonts folder in your project.

There is a live demo  if you want to see the full thing in action.

blurry low resolution placeholder image Astro JS Mux Video: screenshot of demo site shows a video primed to play, currently displaying a poster image reading Boldly going where no video player has gone before.  Video controls are visible
Astro JS Mux Video: Demo site

🗳 Poll #

How much have you worked with Web components already?
Voting reveals latest results.

🙌🏽 Astro JS Mux Video: Wrapping Up #

We have had a look at the Mux custom elements video player in this post. In particular, we saw:

  • how to add the mux-video to an Astro site;
  • linking your Mux video assets in the mux-video player; and
  • that Astro can work without a framework like React or Svelte.

We have just scratched the surface of what we can do with the Mux custom elements player in this Astro JS Mux video post. The video works fine on this simple page, where it is the main content. However, for video lower down the page, you might consider using a Svelte or React component. Svelte, especially, can make it easy to add lazy loading. This is important for making your page load faster. If you prefer to stay frameworkless, many modern browsers have lazy loading support  and you can access this adding a loading="lazy" attribute. Also, check out Mux docs for more customizations .

Have a look at the full project code on the Rodney Lab GitHub page . I hope you found this article useful and am keen to hear how you will the starter on your own projects as well as possible improvements.

🏁 Astro JS Mux Video: Summary #

Does Astro work with custom elements or Web Components? #

Astro works just fine with Web Components. We saw an example where we worked with the mux-video HTML custom element. Here, we created a special JavaScript component file for the player. We only needed one line of code in this file. That line just exported the mux-video custom element package, which we had already added as an NPM package in our project. To ensure Astro bundled the package, we imported the component file in a script tag in a `.astro` page file.

Do you have to use React, Svelte or Vue with Astro? #

Astro ships zero JavaScript by default. We have seen, though, that by using a script tag, we can import Web Components or custom elements and bundle those with our page. This works fine, though to take full advantage of the Astro Islands paradigm it is worth considering adding Svelte or React. This can make it easy to get control over lazy loading and also finer tuned partial hydration. Lazy loading is only loading components just before the users scrolls them into view. That is, instead of immediately on page load. Lazy loading brings the advantage that we can optimize loading the part of the page which the visitor will focus on initially. This improves user experience and should be reflected in Lighthouse or Core Web Vitals metrics.

How can you add video streaming to an Astro JS project? #

An easy way to add video streaming to your site is to use the Mux service with the mux-video HTML component. You just upload a single version of your video (no need to create copies in different formats for different devices, Mux do that for you). Using a service like Mux (over social video sharing platforms) lets you control if ads appear amid your content. On top, you gain control to stop other, potentially unrelated content player once your clip ends. Finally, complying with local data privacy laws can become less of a headache.

🙏🏽 Astro JS Mux Video: Feedback #

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

Just dropped a new post taking you through how you can add

@MuxHQ video to your 🚀 Astro site using their new HTML components player and no framework.

Even adds Chromecast support 😲

Hope you find it useful!https://t.co/VxO2x7UFdz

— Rodney (@askRodney) August 10, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also, subscribe to the newsletter to keep up-to-date with our latest projects.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
ASTRO

Related Posts

blurry low resolution placeholder image Svelte Video Blog: Vlog with Mux and SvelteKit

Svelte Video Blog: Vlog with Mux and SvelteKit

plus
sveltekit
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.