Uploading video locally

Developer help
10

@denvergeeks’ solution was the one that got me going. In my case, the video is comparable in file size to an image, so I was comfortable serving it straight from my Ghost host.

To do so I copied the video file to my server in the location I established in this post. This is the most cumbersome part of the process - the rest can be done in the Ghost editor as denvergeeks describes. My HTML card looked like this:

<figure class="kg-width-wide">
<video controls width="100%">
    <source type="video/mp4" src="/content/images/other/COVIDBlooms_multiple.mp4">
  Your browser does not support the video tag. Click <a href="/content/images/other/COVIDBlooms_multiple.mp4">here</a> to download the video instead.
</video>
</figure>

To get the video to appear wider than the text, and still get centred, I co-opted the kg-width-wide class which is used by the Image card, as described here, and set the width to 100% so it fills the enclosing div. I also added a clickable link for browsers that can’t render the video element.

You can see the result here.

1 Like