Hosting your Own Videos on Ghost

Ghost blog framework works well for hosting videos on YouTube.com and Vimeo.com. However, if you are like me and prefer to host your own videos follow the steps below. It's actually pretty easy.

Edit your Nginx configuration.
sudo vi /etc/nginx/sites-enabled/site.conf

Add the following to your server configuration.

location ~ /videos {
    root /var/www/ghost;
}

The whole file should look simliar to this.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name init6.me;
    root /var/www/ghost/system/nginx-root;

    ssl_certificate /home/init6/.acme.sh/init6.me/fullchain.cer;
    ssl_certificate_key /home/init6/.acme.sh/init6.me/init6.me.key;
    include /var/www/ghost/system/files/ssl-params.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;

    }
    
    location ~ /.well-known {
        allow all;
    }

    location ~ /videos {
        root /var/www/ghost;
    }

    client_max_body_size 50m;
}

Now we need to create the videos directory and set the correct permissions.
sudo mkdir -p /var/www/ghost/videos

Replace user:user with the user you used when setting up your Ghost.
sudo chown -R user:user /var/www/ghost/videos

In your Ghost stories, you can add the following.

<video width="1280" height="720" src="https://yourdomain.com/videos/file_name.mp4" controls></video>

If your theme is using Bootstrap you can also use a responsive embed. This will fully automate making the video responsive.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>