Add Youtube Videos

README.md

@@ -17,6 +17,7 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here
 - Tags
 - Excerpt management
 - [Disqus comments (can be enabled if needed)](#enabling-comments)
+- YouTube video embed
 
 ## Installation
 There are 3 ways to install this theme
@@ -125,6 +126,12 @@ disqus: jekyll-tale
 
 Next, add `comments: true` to the YAML front matter of the posts which you would like to enable comments for.
 
+### Embedding YouTube video
+Replace XXXXXX with your youtube video id
+```
+{% include youtubePlayer.html id="XXXXXX" %}
+```
+
 ## Contributing
 Found a bug or have a suggestion? Feel free to create an issue or make a pull request!
 

_includes/youtubePlayer.html

@@ -0,0 +1,4 @@
+<div class="embed-youtube">
+    <iframe src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen>
+    </iframe>
+</div>

_posts/2021-09-23-youtube.md

@@ -0,0 +1,17 @@
+---
+layout: post
+title: "Youtube Videos"
+author: "Jekyll"
+tags: Tutorial
+excerpt_separator: <!--more-->
+---
+
+You can insert Youtube videos bu using this include.<!--more-->
+
+{% highlight ruby %}
+{% raw %}
+{% include youtubePlayer.html id="iWowJBRMtpc" %}
+{% endraw %}
+{% endhighlight %}
+
+{% include youtubePlayer.html id="iWowJBRMtpc" %}

_sass/tale.scss

@@ -6,5 +6,6 @@
 @import 'tale/layout';
 @import 'tale/pagination';
 @import 'tale/catalogue';
+@import 'tale/youtube';
 @import 'tale/404';
-@import 'tale/tags';
+@import 'tale/tags';

_sass/tale/_youtube.scss

@@ -0,0 +1,14 @@
+.embed-youtube {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 25px;
+    height: 0;
+}
+
+.embed-youtube iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}