Create responsive videos with your own hosted content with Galaxie Blog Directives

It is recommended to use the media interfaces in the post editor, however, you can also 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 that are 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 the videos to be optimized for different client devices, just like responsive images, you can use up to three videos of different sizes. Galaxie Blog supports 576p, 720p, and High Definition 1080p video formats.

Once you have the video(s) on a server, you will need to enter the proper URL xml post directives into the Post Header interface.

The following Galaxie Blog Post XML Directives were used to play the video that you see on top of this blog post.

• The videoType directive is necessary. Here I set it to ".mp4"
• The videoPosterImageUrl directive completely 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 to have 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 are integrating a video that is hosted on another server, set the videoCrossOrigin to true.

This snippet of code will initialize our Plyr and it will 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.

Embedding Vimeo videos using Galaxie Blog Directives.

Note: it's recommended that you use the media interface in the post editor to insert Vimeo videos. However, you can also use Galaxie Blog Directives.

To embed a Vimeo video into the enclosure using a Galaxie Blog Directive, simply grab the video Id from Vimeo, and copy and paste the URL into the Post Header editor like so:

<vimeoVideoId>343068761</vimeoVideoId>

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

Embedding YouTube videos using Galaxie Blog Directives

While it is recommended to insert YouTube videos with the media editor, you can also embed YouTube videos with Galaxie Blog Directives.

I intend to use the capabilities of the Galaxie Blog Directives in a new markdown editor that I will incorporate in a future version. Additionally, the video directives provide backward compatibility with previous versions of Galaxie blog. 

To embed a YouTube URL to the enclosure, simply grab the video URL from YouTube, and copy and paste the URL into the YouTube URL xml post directive into the Post Header interface: 

<youTubeUrl>https://www.youtube.com=watch?v=LXt-hDDiEAQ&feature=youtu.be</youTubeUrl>

This snippet of code will initialize our Plyr and it will play the YouTube 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.

This video is an amazing performance by Chris Botti and Carolyn Campbell playing Kashmir to the violin. The video source is from YouTube at https://www.youtube.com/watch?v=LXt-hDDiEAQ&feature=youtu.be.