Uploading video locally

Developer help
1

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?

2

Hi Biko,
The answer to your question is here:

The original thread is here:

Cheers

2 Likes
3

Host it on Vimeo and make it private!?

1 Like
4

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

1 Like
5

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.

1 Like
6

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

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
11

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.

2 Likes
12

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. (:

13

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:

1 Like
14

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! :smile:

Your example video worked for me, but nothing I do seems to work :cry: 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?

15

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

1 Like