Jekyll Embed Video screenshot

Jekyll Embed Video

Author Avatar Theme by Nathancy
Updated: 7 Aug 2022
278 Stars

Embed videos in Jekyll webpages without a plugin (Youtube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, Google Drive clips + more)

Categories

Overview

The Jekyll Embed Video is a tool that allows users to embed videos from various platforms such as YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, and Google Drive into Jekyll webpages without the need for third-party plugins. This is particularly useful for users who are hosting their webpages using GitHub pages since they are restricted from using plugins. The tool provides a method using “includes” instead of plugins to embed the videos. It also provides responsive videos that automatically resize with changing window dimensions.

Features

  • Embed videos from platforms like YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, and Google Drive
  • Use “includes” instead of plugins to embed the videos
  • Responsive videos that automatically resize with changing window dimensions

Installation

  1. Copy the code from the youtubePlayer.html file located in the _includes folder.
  2. Create a new file in your _includes folder and name it youtubePlayer.html.
  3. Paste the copied code into the youtubePlayer.html file.
  4. In your .md file where you want to embed the YouTube video, place the following snippet:
{% include youtubePlayer.html id="YOUR_YOUTUBE_VIDEO_ID" %}
  1. Replace YOUR_YOUTUBE_VIDEO_ID with the actual YouTube video ID.

Summary

The Jekyll Embed Video tool allows users to embed videos from various platforms into their Jekyll webpages without the need for third-party plugins. It provides a method using “includes” instead of plugins, making it compatible with GitHub pages hosting. The tool also offers responsive videos that automatically resize with changing window dimensions, providing a better user experience. Overall, this tool simplifies the process of embedding videos in Jekyll webpages and enhances the visual appeal of the content.