A Jekyll plugin for embedding YouTube videos
The Issue
We want to embed YouTube videos on our Jekyll site. How can we do this?
General Considerations
YouTube videos can be embedded when loading the YouTube video only after the user consents. Usually, this is done by clicking on a placeholder image or a similar element.
The Jekyll plugin
Thanks to the ASF Infrastructure team, ASF sites are allowed to use plugins with Jekyll. Plugins make it easier to embed YouTube videos on your site.
A plugin is a Ruby script that extends Jekyll’s functionality.
The following plugin can be placed inside the _plugins
directory of your Jekyll site.
module Jekyll
class YouTube < Liquid::Tag
def initialize(tag_name, text, tokens)
super
@text = text.strip
end
def render(context)
video_id, image_url = @text.split(' ')
<<~HTML
<div class="youtube-placeholder yt-container-#{video_id}" style="cursor: pointer;">
<img src="#{image_url}" alt="Video thumbnail">
</div>
<div class="youtube-placeholder-description">
Clicking on this image will load the video and send data from and to YouTube/Google.
</div>
<style>
.youtube-placeholder {
width: 560px;
height: auto;
}
.youtube-placeholder-description {
color: gray;
font-style: italic;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('.yt-container-#{video_id}');
function addElement() {
var iframe = document.createElement('iframe');
iframe.setAttribute('width', '560');
iframe.setAttribute('height', '315');
iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/#{video_id}?autoplay=1');
iframe.setAttribute('title', 'YouTube video player');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
iframe.setAttribute('allowfullscreen', '');
container.innerHTML = '';
container.appendChild(iframe);
}
container.addEventListener('click', addElement);
});
</script>
HTML
end
end
end
Liquid::Template.register_tag('youtube', Jekyll::YouTube)
Using the plugin
To use the plugin, you can add the following code to your Markdown file:
{% youtube Hpe7p24DQo0 /img/placeholder.jpg %}
This will create a placeholder image that, when clicked, will load the YouTube video with the ID Hpe7p24DQo0
.
You can see the plugin in action on the Logging Website. The source code can be found here.