Hotwire Discussion

Video Tags loaded via Turbo Drive

Hey all! I’m working on a little side-project, and am having an absolute blast tinkering with Hotwire.

I’ve run into a small snag I can’t seem to figure out. I have a video tag on a page. When I visit that page, the video doesn’t load—nada. If I refresh the page, it’s there just fine. Click away, and back, and it’s gone again.

If I add a data-turbo-permanent attribute to the video tag the behavior is slightly different. If I navigate to the page with the video, it still doesn’t work. But if I then navigate away, and back to the video page, it loads! And similarly, if I refresh on the video page, it sticks around correctly when I navigate away and back.

I’ve read up a bit on the HTMLMediaElement apis, but can’t seem to figure out what’s going on.

Here’s a gif demo showing the case without data-turbo-permanent:

Notice when I navigate back to the video page, there’s a quick flash of the video, where it looks like the cached preview that’s shown has the video loaded, and is quickly replaced with an unready one with the response from the server.

Any ideas about what’s going on?

Are you using Safari, by chance? If so, it might be this issue (see also: my commentWebKit bug report).

1 Like

Ahah! Nailed it. Brilliant work figuring that out. Thank you!

If you’re using Stimulus, here’s a (hopefully temporary) workaround:

// autoimport_controller.js
export default class extends Controller {
   initialize() {
     this.element.replaceWith(this.element.content)
   }
 }
<template data-controller="autoimport">
  <video>…</video>
</template>
3 Likes

Oh, neat. Yea, that does the trick. Thank you so much. :pray: