Create Responsive Videos Using Galaxie Blog Directives

If you want to include video from an external source, such as Vimeo or YouTube, it is recommended that you use the media interfaces in the post editor. However, if you want to include a locally hosted responsive video, you can embed responsive videos using Galaxie Blog Directives.

Galaxie Blog supports the following video types: .mp3, .mp4, .ogg, .ogv and .webm. If you have the video in another legacy format, you'll need to convert it to a modern format to play it in Galaxie Blog.

If you have a supported video format, upload your videos using an FTP client.

You can also host videos stored on a different server, but you'll need to specify the cross-origin true argument using a Galaxie Blog Post Directive.

If you want your videos optimized for various client devices, you can use up to three videos of different sizes, just like responsive images. Galaxie Blog supports 576p, 720p, and High-Definition 1080p video formats.

Once you have the video(s) on a server, you must enter the proper URL xml post directives using the Post Header interface.

The following snippet is placed into the Post Header interface: 

<descMetaTag>Playing videos using Galaxie Blog</descMetaTag>
<facebookImageUrlMetaData>https://galaxieblog.org/enclosures/facebook/battleStarGalactica.jpg</facebookImageUrlMetaData>
<twitterImageUrlMetaData>https://galaxieblog.org/enclosures/twitter/battleStarGalactica.jpg</twitterImageUrlMetaData>
<videoType>.mp4</videoType>
<videoPosterImageUrl>https://galaxieblog.org/enclosures/battleStarGalactica.jpg</videoPosterImageUrl>
<mediumVideoSourceUrl>https://galaxieblog.org/enclosures/BattlestarGalacticaHDTrailer.mp4</mediumVideoSourceUrl>
<videoCrossOrigin>false</videoCrossOrigin>

 

  • The videoType directive is necessary. Here, I set it to ".mp4"
  • The videoPosterImageUrl directive is entirely optional. This is used to 'cover' the video with an image until it is played. I used an image of the video to cover the video and specified the URL.
  • Since my video format is 720p, I used the mediumVideoSourceUrl directive.
    • You can use one argument, two, or all three for a responsive video. You will need at least one argument for the video to play
    • Use smallVideoSourceUrl for 576p
    • Use mediumVideoSourceUrl for 720p
    • Use largeVideoSourceUrl for 1080p
    • Or use all three arguments if you want the video to be responsive
      • This video is hosted on the same domain, so I used false for the cross-origin argument. If you integrate a video hosted on another server, set the videoCrossOrigin to true.

This code snippet will initialize our Plyr and play the video file within Galaxie Blog. The video will be lazy-loaded and will only load once the page loads and the video is downloaded to the client.