Uploading video locally

[biko-the-bird]

I am using the latest version of ghost with casper. I am trying to figure out a way to upload a video to ghost so that I can have it in my post. The nature of the content means I can not link this video from a third party hosting service like youtube or vimeo.

Is there a way to add a video to a ghost post from a file instead of a link? i.e. upload myvideo.mp4 and have it be embeded in the post like a youtube video would be?

[Gabrielgb]

Hi Biko,
The answer to your question is here:

Hosted audio and video, embedded in posts

Unfortunately hosting audio and video is expensive, difficult, and full of problems. The effort is not worth the reward to build this into Ghost or support it. Using external services who specialise in audio/video hosting is far and away the best solution.

The original thread is here:

Hosted audio and video, embedded in posts

The ability to add audio and video clips to posts would be a welcome addition. Video can already be added by embedding a YouTube or Vimeo video, but this comes with some restrictions such as being bound by the external provider’s terms of service. It also creates a dependency on centralised social media platforms. There is a lengthy discussion about adding audio and video support to CommonMark using the existing image syntax with the usual audio and video file extensions, e.g. ![](my-audio-fil…

Cheers

[KranzKrone]

Host it on Vimeo and make it private!?

[luciandavidescu]

You could upload it somewhere via FTP and then use the <video> tag inside a html card.

: The Video Embed element - HTML: HyperText Markup Language | MDN

[denvergeeks]

Create an HTML card with the following code:

<video controls width="250">

<source src="/media/examples/flower.webm"
        type="video/webm">

<source src="/media/examples/flower.mp4"
        type="video/mp4">

Sorry, your browser doesn't support embedded videos.
</video>

Obviously replace src=“/media/examples/flower.webm” with the link to your Video

The tutorial below uses the (built-in to browsers) HTML Audio Embed element in a Ghost HTML card, playing an audio file (i.e .mp3) uploaded to a free Cloudinary account.

The process on Cloudinary should be the same, uploading a video file to a free Cloudinary account, just use the HTML Video Embed element code as above in your HTML card in the Ghost editor.

Adding Audio Files to a Ghost-Hosted Blog.

[11112]

Try https://viqeo.tv/#en . It allows to embed video without YouTube or Vimeo and doesn’t require much traffic for user.

Usage example here TaskbarDock helps you fine-tune Control Panel

[EmpiricalEE]

@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.

[EmpiricalEE]

For anyone still following this advice (like me!), Ghost’s built-in video element now supports uploading from file. Looks like the file gets put in /content/media and custom controls are drawn over the bottom of it. The Ghost editor provides a few options for size, behaviour and appearance, and the result has the same sort of figure/video structure as my custom HTML above.

I do have to rename my videos from .mov to .mp4 (which otherwise makes no difference) to allow them to be uploaded.

So it looks like this manual method serves little purpose now! This built-in functionality is much nicer.

[Cort_P]

Hi @EmpiricalEE
New to ghost - I have been unable to successfully upload any video from file.
using .mp4 - tried multiple codecs on multiple videos on both mac & pc
video will seemingly upload but then only shows a gray screen and does not show up on the front of the site at all
Any advice/ links would be much appreciated. (:

[EmpiricalEE]

Hmm, that’s frustrating. I’m new to the feature too and didn’t have the same trouble, but video is one of those things that either works or is a minefield to get right!

Maybe try different browsers too if you haven’t already?

Here’s one of the videos that worked for me: you might try downloading it and giving it a go, to rule out an issue with the source video:

[jamesdaly]

Thank you for adding this update, I’ve been going crazy wondering what I’m doing wrong with video, good to know it can actually work!

Your example video worked for me, but nothing I do seems to work Trying as many different types of mp4 I can, including renaming a .mov straight from my iPhone as you mentioned.

Can you give any more info on your video that worked, maybe the software used to edit or export it?

[jamesdaly]

Update, I think I might have it, seems to be file size related. If I upload a 10mb video it just fails with no other video. But a 3mb video works fine

[IrisThemes]

You should check your client_max_body_size. You should also check your codec and whether the video works when you convert it to mp4 (some online tools can mess up your video).

I wrote one blog post that can help you with uploading videos to Ghost

I hope it will be helpful, and I will add more things when we encounter something new.