atelierbram

Lazy loading video

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

You'll notice the addition of the poster attribute, which lets you specify a placeholder to occupy the <video> element's space until the video is lazy-loaded. As with the <img> lazy-loading examples, stash the video URL in the data-src attribute on each <source> element. From there, use JavaScript code similar to the Intersection Observer-based image lazy loading examples:

phenaproxima

Let's learn a little bit about how Project Browser works.

You can trust me. Together with @chrisfromredfin, @tim.plunkett, and a lot of other contributors, I have spent the better part of the last year refactoring, rearchitecting, and rewriting most of Project Browser, to try and lift it out of its proof-of-concept roots and turn it into a modernized extension browsing and installation system for Drupal. This, then, is a tour of Project Browser from a developer's perspective.

The thing you need to know about Project Browser is that, despite being a decoupled app, it has no JavaScript API at all. The UI, which is written in Svelte, is completely and totally locked down and cannot be extended. What API surface it has is entirely on the PHP side. So let's talk about what those parts are.

The Project class

The most important class in Project Browser is Project. It is a value object that represents a single project that you can see in the UI. Project Browser takes a pretty expansive definition of what