Jekyll: Embed Videos


Embedding a Youtube video in a Jekyll blog post rather than just linking to it: 2 Solutions. Also displaying raw Jekyll code on a page as well as redirecting from http to https.

In a recent post I wanted to include a short Youtube video of of a solenoid driving a railway style signal built using Lego. Initially I just included a URL link to the video but that takes you off site. With a bit of searching I found two ways to embed the video in a Jekyll blog post.

The URL for a typical Youtube video is https://www.youtube.com/watch?v=XxBxDnFghbc
The Youtube Id for that is XxBxDnFghbc. This video has been embedded using first method below in the previous post here: Google Home Windows Bridge: GPIO Hardware, at the bottom of the page.

The Solutions

Both solutions are on GitHub (thanks to the authors):

Whilst there are similarities and differences, both method are simple to implement. The second method uses a plugin, the first uses an includes html file. The first one is a little more formal in tha the Youtube Id of the video is included in the of the page’s Front Matter. Both methods are equally usable.

Nathancy Method

Embed YouTube

Create a file in your _includes folder called youtubePlayer.html with this code inside:

<div class="embed-container">
  <iframe
      src="https://www.youtube.com/embed/"
      width="700"
      height="480"
      frameborder="0"
      allowfullscreen="">
  </iframe>
</div>

Place this snippet inside your .md file where you want to embed your video:

{% include youtubePlayer.html id=page.youtubeId %}

In the Front Matter of the page, put the YouTube video ID as follows:

youtubeId: putYourIDHere

For more details, see the first link above.

The Eug Method

Download the add-in file video_embed.rb from link 2 as above. Place it in the _plugins directory.

Include the following in page where required:

{% tag video_id width height %}

The tag is just youtube (there are others, see the link). width and height are optional.

For more details, see the second link above.

Conclusion

It is quite simple using Jekyll to embedded a Youtube video (and other types of hosted videos) in a page.

FYI Straight HTML Embedding

Haven’t checked these out: How to insert a movie or video in an HTML document. “The examples therein provide different methods to make the video file viewable from the browser window.”

Also about Embedding Jekyll code in raw mode

In commenting on Jekyll coding, you run into problems when including Jekyll code in raw mode using tildes such as:

{% tag video_id width height %}

The braces-% tend to get interpreted as Jekyll. The solution is:

{%raw%}
{% tag video_id width height %}
{\%endraw%}

Remove the backslash from the endraw tag.

See the first answer of StackOverflow here

Redirection

I have set my blog site up such that if the url is only http it redirects to to https. That is Ok when published but when authoring a page it is an issue running the site locally as it it always redirections to the published site. I include Front Matter:

noredirect: true

The page redirect code then checks for this first.

Finally

In publishing this page via Azure Devops to Azure Blob Storage (Static Website), I had to upgrade the VM being used in the Release pipeline from Windows 2016 to Windows 2019. 2016 will be deprecated in Azure Devops in April. Whilst the site still built once pushed to the repository, Windows refused to publish it.

 TopicSubtopic
  Next: > Google Home Windows Bridge
<  Prev:   Google Home Windows Bridge
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > Jekyll
<  Prev:   Meltdown