# Video files returning 404 on live site and Safari

**URL:** <https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234>\
**Category:** Questions\
**Tags:** v2\
**Created:** [April 16, 2018, 2:01pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234 "2018-04-16T14:01:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 16, 2018, 2:01pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/1 "2018-04-16T14:01:18Z")

</div>

I want to play videos that are self-hosted through Kirby. The files play fine locally on Chrome and Firefox but on the staging server and local Safari they return a 404. How can I troubleshoot this? I’m not even sure what information is required to provide a better understanding of the problem.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [April 16, 2018, 3:13pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/2 "2018-04-16T15:13:36Z")

</div>

how are your paths being generated and what video formats are you using (different browsers support different formats, but for the most part, [MP4 is pretty universal](https://caniuse.com/#feat=mpeg4). If you can only do one file, chose that one.)?

Also, how are you doing it… a custom tag… a snippet… show us your code 🙂

For the record, it is much less hassle to use Vimeo or Youtube to store your videos, because they handle file conversion and the players are clever enough to deliver the right files to the right browsers. However, theres a good starting for hosting by Bastian in the [cookbook](https://getkirby.com/docs/cookbook/html5-videos). I also know there is a good multi-format custom tag somewhere on the forum but i cant seem to find it.

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 16, 2018, 3:49pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/3 "2018-04-16T15:49:35Z")

</div>

Thanks for replying @jimbobrjames. What do you mean how are my paths being generated? I have tried both `.mp4` and `.mov` files both files work on locally Chrome and Firefox neither work on the live server or Safari locally. I am playing the videos using [plyr](https://github.com/sampotts/plyr) but even using the default html5 player I have the same problem. Any help would be greatly appreciated.

projects.php controller

```
<?php

return function($site, $pages, $page) {
    $projects = page('projects')->children()->visible();

    return compact('projects');
};

```

projects.php template

```
<?php foreach($projects as $project): ?>    
    <?php if($project->featurevideo()->isNotEmpty()): ?>
        <div class="plyr-container">
            <?php if($file = $project->featurevideo()->toFile()): ?>
            <video poster="" class="js-player" playsinline controls>
                <source src="<?= $file->url(); ?>" type="video/mp4">
            </video>
            <?php endif; ?>
        </div>
    <?php endif; ?>
<?php endforeach; ?>
```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 16, 2018, 3:56pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/4 "2018-04-16T15:56:57Z")

</div>

What environment are you using locally?

What exactly happens in the network tab? Are the headers alright?

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 16, 2018, 4:08pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/5 "2018-04-16T16:08:13Z")

</div>

I’m using Brocessing’s [Kirby-Webpack](https://github.com/brocessing/kirby-webpack). I have attached a screenshot of the live server’s Chrome Network tab and of Safari local.

![15](https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/flex017/uploads/getkirby/original/2X/0/0ea81fddf709720c1fff6c7cdde185f8a154716c.jpg)

![34](https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/flex017/uploads/getkirby/original/2X/4/47472c9a664cdfc0ccc70fe558c40169fe8b49c7.png)

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 16, 2018, 4:22pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/6 "2018-04-16T16:22:05Z")

</div>

I’d assume that somehow the servers do not send the correct headers.

Could you test if you get the same result if you set up a simple HTML template with the video tag?

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 16, 2018, 4:30pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/7 "2018-04-16T16:30:34Z")

</div>

I’m unsure as to what you mean, do you want to create .html and put it at the root of the staging server?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 16, 2018, 4:32pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/8 "2018-04-16T16:32:14Z")

</div>

That’s what I meant, to rule out this is Kirby related. Are those generated URLs correct, btw, with those cryptical numbers?

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 16, 2018, 5:05pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/9 "2018-04-16T17:05:37Z")

</div>

A normal index.html with the same video file works. So it seems it’s a most likely something I have done with the Kirby project

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 16, 2018, 5:18pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/10 "2018-04-16T17:18:10Z")

</div>

And if you include a simple videotag in a fresh starterkit, without the plyr player?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 16, 2018, 7:14pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/11 "2018-04-16T19:14:45Z")

</div>

We had an issue before with Safari, Videos and the built-in server on Mac.

I just did a quick test again both with Kirby and with a simple html file:

- Safari + video + html file + built-in php server: doesn’t work
- Safari + video + Starterkit + built-in php server: doesn’t work
- Safari + video + html file + Mamp Apache : does work
- Safari + video + Starterkit + Mamp Apache: does work

Therefore I’m a bit surprised your html file worked (unless you opened it as a file, not using the server).

Don’t know what the built-in web server in Kirby Webpack uses… but it might be a related issue.

All of the above doesn’t explain your issues on the staging server, though (in fact, it doesn’t explain anything anyway, just observing things).

But I’m at my wits end here and all I can suggest to test if you have the same problem with a standard php file on the staging server or not. Also, both issues - Safari on localhost and the other browsers on staging - may not be related.

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 17, 2018, 3:01pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/12 "2018-04-17T15:01:20Z")

</div>

I really appreciate the help. I ran all the tests again.

Testing with `php -S localhost:8000` and video on Safari

- index.html - doesn’t work
- index.php - doesn’t work
- StarterKit - doesn’t work

Testing with MAMP and video on Safari

- index.html - worked
- index.php - worked
- StarterKit - worked

Fresh Kirby Webpack video on Safari local - doesn’t work (works on Chrome, Firefox and on a VirtualBox Microsoft Edge - hardcoded path and returning the video through the panel)

Staging (Digital Ocean - Ubuntu 16.04 LAMP) video on Safari

- index.html - worked (I was reffering to this when it worked)
- index.php - worked
- StarterKit - worked
- fresh Kirby-Webpack - worked

I guess I can proxy through MAMP with Webpack locally and I will rebuild my project in the fresh Kirby-Webpack and see where the problem is on the staging server.

---

<div class="post-metadata">

**Author:** ![sylvainjule](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/sylvainjule/32/4338_2.png) [@sylvainjule](https://forum.getkirby.com/u/sylvainjule)\
**Post date:** [April 17, 2018, 4:16pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/13 "2018-04-17T16:16:55Z")

</div>

Maybe you could try running the request in your terminal with curl, adding the Safari request headers that ended with an error and removing/changing them one by one to try and find a culprit :

`curl 'http://url' -H 'Accept: */*' -H 'Accept-Encoding: identity;q=1, *;q=0' -H '...'`

(in Chrome : in the network tab, right-click on the request name -\> Copy -\> Copy as cURL)

You could also try to add the mime types explicitely in your `.htaccess` if you haven’t already :

```auto
<IfModule mod_mime.c>
    AddType video/quicktime mov
    AddType video/mp4 f4v f4p m4v mp4
    AddType video/ogg ogv
    AddType video/webm webm
    # etc
</IfModule>

```

---

<div class="post-metadata">

**Author:** ![EconHettie](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@EconHettie](https://forum.getkirby.com/u/EconHettie)\
**Post date:** [April 17, 2018, 6:41pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/14 "2018-04-17T18:41:12Z")

</div>

Thanks for replying. I don’t quite understand headers or curl requests but I will read up on them now and test.

After testing the staging with the starterkit, etc I pushed the original site back on to the staging server to try again, I deleted the content and re-added them again. Now the videos return 404 on the staging server on both Chrome and Safari, however if I hard code the video from my assets folder the video works fine on both of the browsers. The videos work correctly on locally on Chrome.

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [December 5, 2018, 2:39pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/15 "2018-12-05T14:39:01Z")

</div>

having the same problem with Safari only, and it’s kirby specific.

weird cause it’s not the first time i embed videos through the `<video>` tag, and never had this problem. i tested the same video on a simple `html` page and it works fine.

what i see happening is that Safari reads twice the video

 ![10](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/e/e0bf0ee8c557bf4f9527541ca1f7727df0f5ba95.png)  
 ![15](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/5/55420572033f367f9bb76591ee0245c8f1d2ff94.png)

I tested this also on an online server where the other websites with video do work, and i get the same error.

not sure if it’s the newest Safari and / or kirby? i mean, the same last Safari version works with other kirby websites i built.

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [December 5, 2018, 2:52pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/16 "2018-12-05T14:52:40Z")

</div>

> just to reconfirm this awful bug. Django 2 Python 3.6. I tried literally everything and the problem is indeed that Django doesn’t **support byte-range requests** so it would work on Chrome, Firefox but not Safari or iOS.

from this [stack overflow](https://stackoverflow.com/questions/48008597/video-does-not-work-on-safari-and-ios#comment85694115_48063621)

i cannot test for byte-range request support as the video simple does not load up in the page ([see this suggestion](https://serverfault.com/a/547078)).

i think kirby does support for byte-range request, right?

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [December 5, 2018, 3:07pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/17 "2018-12-05T15:07:05Z")

</div>

Just a hunch but what happens if you take the .gif out of the filename so the name is `goats.mp4`? Looks like it is getting sent with right header from your screen shots, perhaps its getting confused between gif and mp4. Just a stab in the dark. Does the problem only occur with that particular file?

How are you populating the video tag? Depending on how you fill the path, Kirby can cause a redirect to the real file. I ran into this the other day had double hits on the videos.

So if you fill in the path on the video tag like:

```auto
http://domain.test/home/home.mp4

```

Kirby will actually redirect that to:

```auto
http://domain.test/content/home/home.mp4

```

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [December 5, 2018, 3:16pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/18 "2018-12-05T15:16:35Z")

</div>

hey thank you!

it’s not file specific. i changed the filename but with no good result.

i am loading a bunch of videos (and on click loading a slideshow with them).

here the snippet

```auto
<div>
    <?php foreach($data->gallery()->toStructure() as $vid): ?>
        <video width="auto" class="slide" preload="metadata" type="video/mp4">
          <source src="<?= $vid->toFile()->url() ?>">
        </video>
    <?php endforeach ?>
</div>

```

i converted [kirby-images](https://github.com/medienbaecker/kirby-images) to kirby-videos. wondering if in the plugin code there is something that makes the video load twice? would be strange (but i’m gonna check).

how did you solve your problem the other day?

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [December 5, 2018, 3:21pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/19 "2018-12-05T15:21:51Z")

</div>

> [@afincato](#):
>
> how did you solve your problem the other day?

My tag looks like this, and it powers the full screen background vid on my [home page](https://hashandsalt.com)…

```auto
    <video loop muted poster="<?= $page->articleimage()->toFile()->url() ?>" autoplay class="fullscreen-bg-video">
        <source src="<?= $page->file('train-ride.mp4')->url() ?>" type="video/mp4">
    </video>

```

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [December 5, 2018, 3:26pm UTC](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234/20 "2018-12-05T15:26:11Z")

</div>

Safari is not loading the video on the online server, but it does not display a (automatic) stillframe. And on click it plays the video at least.

I tried to move the `type` attribute from `<video>` to `<source>` like in your example, but not difference in Safari.

Guess I’m almost there… 😃

* * *

EDIT actually nothing changed.

[Next page](https://forum.getkirby.com/t/video-files-returning-404-on-live-site-and-safari/10234.md?page=2)