Improvements to the Video Card

Hey all,

I’ve just tried out the new video card on a blog post. Works really great, nice to be able to drop a video straight onto the page and get working.

However I was wondering if there’s some performance improvements to be made with how the video is setup with HTML and JavaScript? I’m using Ghost as a headless CMS, which means I’ve basically opted out of the custom controls and presentation that comes with the video card. I’m ok with that part, it’s the extra HTML that I’m unsure about. Not only do I need to hide a bunch of HTML that’s not being used, but I also need to re-enable the default video controls with the controls attribute.

I was wondering that instead of all this custom HTML coming down the line it should be added using the same JavaScript that controls the video when the buttons are interacted with? In addition the JavaScript could remove the controls attribute and prep the video element for your custom controls. I don’t think there would be a massive performance hit, if anything it would be more progressively enhanced as if the JavaScript didn’t run the default video element and controls would be there in their place.

The “loop” option may not even need that HTML as it just loops automatically, all the JavaScript would do there is possibly remove the controls attribute incase someone is using the page deliberately without JS.

I’ve put this into the contributing category as I’m kinda accepting that I may have to get my hands dirty with code, but I’d also like feedback on this idea before making any code changes. For reference I’m guessing all the video code is here?

Anywho thanks for reading! :v:

1 Like

Coming back to this with some very simple pseudo code:

const setupTemplate = function (videoElementContainer) {
  const videoControlsTemplate = `
<div class="kg-video-overlay">
  <button class="kg-video-large-play-icon">Play</button>
</div>
<div class="kg-video-player-container kg-video-hide">
  <div class="kg-video-player">
    <button class="kg-video-play-icon">Play</button>
    <input type="range" class="kg-video-volume-slider" max="100" value="100" />
  </div>
</div>
`;

  const videoContainer = videoElementContainer.querySelector(
    ".kg-video-container"
  );

  videoContainer.innerHTML = videoContainer.innerHTML + videoControlsTemplate;
};

I’ve removed the SVG code to keep the code sample brief. I did try to put this together with the existing code but didn’t get as far as I need to effectively turn it into a promise so this will get applied before the rest. I still think this is a good idea as loading these controls without JavaScript could be misleading. Better to provide the default video element to people if the JavaScript fails.

Update: This is how the video card looks when shown inside an RSS app.

I thought it might be my own custom Jamstack setup but this is a video from the official Ghost Changelog feed. I really think it would be beneficial if the custom video controls were loaded in as part of the client-side JavaScript. Doing so would eliminate this broken experience and follow progressive enhancement more elegantly.

1 Like