Spectral Web Services
Embed video on your Ghost site
Options for embedding video in Ghost
This post is part of a larger collection, found here: Widgets for Ghost
All these embeds require JavaScript to work. They will not work in email. If you're writing a newsletter for emailing, none of these are the solution you're looking for. More details on the widgets collection page, linked above.
Ghost embeds YouTube and Vimeo natively. Click the + button or start by typing / on a blank line in the post editor to see those options. What are the other options?
I'm not a huge fan of the YouTube embed. While they're everywhere, the controls and branding are clunky, especially in the case of smaller embeds.
Fielding a question about video embeds over on the Ghost forum got me to take a look at Muse.ai, and it looks great! Unfortunately it is not free, but there are some pretty cool features... and I love that it's completely frameless until you hover over it.
Here's the Muse.ai embed code that produces the embed above:
<div class="home-right">
<div class="player-container">
<div id="player-featured" class="muse-video-player"></div>
</div>
</div>
<script src="https://muse.ai/static/_gen/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: document.getElementById('player-featured'),
video: '8KsbyKv',
height: 'fill',
title: false,
search: false,
autoplay: true,
loop: true,
logo: false,
volume: 0,
});
</script>
Contrast that with a Youtube embed:
Yes, I wrote an entire game of Hangman in Thunkable's block builder. I like a challenge.
At this size, I don't hate the YouTube embed, but as the video gets smaller, the required overlays sort of take over. Here's an example of some custom work I did for The Stack, to put YouTube embeds on their index pages, not just in their posts. As you can see, the YouTube overlay is sort of annoying. Still, it can be hard to argue with free...
Staying native
I almost forgot the Ghost built-in video player. Is it a widget? I'll include it here anyway! Unlike images, which can mostly be dragged and dropped into the editor, you will probably have to select it from the + menu or by typing /video.
Native Ghost-hosted video that I incorporated into the landing page of CSO Futures.
The player is ok, but it's missing nice features like responsiveness. I also can't don't have my self-hosted server configured for large uploads, so this low resolution 41 second video is about my limit. (I could fix this, but nah.)
What other video embedding options do you like?
Hey, before you go... If your finances allow you to keep this tea-drinking ghost and the freelancer behind her supplied with our hot beverage of choice (or maybe some popcorn), we'd both appreciate it!
