diff --git a/README.md b/README.md index 3e7903fec3..55a8e0b608 100644 --- a/README.md +++ b/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! diff --git a/_includes/youtubePlayer.html b/_includes/youtubePlayer.html new file mode 100644 index 0000000000..b775a34886 --- /dev/null +++ b/_includes/youtubePlayer.html @@ -0,0 +1,4 @@ +
\ No newline at end of file diff --git a/_posts/2021-09-23-youtube.md b/_posts/2021-09-23-youtube.md new file mode 100644 index 0000000000..3397e161cd --- /dev/null +++ b/_posts/2021-09-23-youtube.md @@ -0,0 +1,17 @@ +--- +layout: post +title: "Youtube Videos" +author: "Jekyll" +tags: Tutorial +excerpt_separator: +--- + +You can insert Youtube videos bu using this include. + +{% highlight ruby %} +{% raw %} +{% include youtubePlayer.html id="iWowJBRMtpc" %} +{% endraw %} +{% endhighlight %} + +{% include youtubePlayer.html id="iWowJBRMtpc" %} \ No newline at end of file diff --git a/_sass/tale.scss b/_sass/tale.scss index 007fa5ac29..e191a5d485 100644 --- a/_sass/tale.scss +++ b/_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'; \ No newline at end of file +@import 'tale/tags'; diff --git a/_sass/tale/_youtube.scss b/_sass/tale/_youtube.scss new file mode 100644 index 0000000000..4000705bad --- /dev/null +++ b/_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%; +} \ No newline at end of file