Can Ghost uploaded videos be made fullscreen?

Using Ghost
1

If I upload a video to ghost and include it in a post, can that video be made full screen? I don’t see that option on the ghost player (what player does ghost use?)

Thanks!
JD

3

When I am making a post, the little + SIGN pops up a menu that includes VIDEO. If I upload a video to that interface it plays back. What video player is playing that back? It’s not embedded by me.

4

It’s the native browser video player

5

Ghost itself doesn’t use any video player. The video gets rendered in a <video>...</video> HTML tag, with a bit of styling around it.

Generally speaking, this is a good design choice, in my opinion, given that there are no third-party dependencies needed. So…loads quicker than loading some external library to display a video. But…yeah, it comes with the downside that there is no native fullscreen option.

There is the Fullscreen API, which is supported by many browsers. You could try hack something together with that. Kinda like the solution in this thread on Stack Overvlow: html - Is there a way to make HTML5 video fullscreen? - Stack Overflow

2 Likes
6

Thanks I’ll take a look!

7

Stumbled across this thread trying to make videos full screen. It appears all the player controls are implemented independently of the video element. Played around and if you insert the following html in the page it will strip all the control overlays and turn on the video controls=“true” attribute.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.kg-video-overlay, .kg-video-player-container').forEach(function(element) {
    element.parentNode.removeChild(element);});
  document.querySelectorAll('video').forEach(function(element) {
    element.setAttribute('controls', 'true');});
});
</script>

This seems to work on a few test posts i’ve done.

8

This will work with themes that have page transitions between the posts.
Also display the first frame instead of black.

<script>
function updateVideoControls() {
    document.querySelectorAll('.kg-video-overlay, .kg-video-player-container').forEach(function(element) {
        element.parentNode.removeChild(element);
    });
    document.querySelectorAll('video').forEach(function(video) {
        video.setAttribute('controls', 'true');
        video.addEventListener('loadedmetadata', function() {
            video.currentTime = 1;
        });
    });
}

document.addEventListener('DOMContentLoaded', (event) => {
    updateVideoControls();
    
    const observer = new MutationObserver(function(mutationsList, observer) {
        mutationsList.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                updateVideoControls();
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
});
</script>