Adding youtube embed video plugin

[MartinDelille]

Before submitting an issue, please be sure to

• [x] Read the contributing instructions
• [ ] Update to the latest Gem version (run bundle update github-pages)

This issue affects

• [x] The site generated by GitHub Pages
• [ ] Building sites locally

The GitHub Pages Gem is intended to help users replicate the GitHub Pages build environment locally. If your issue affects both the hosted version and the version previewed locally, you may be better suited reporting seeking support in other forums.

What did you do (e.g., steps to reproduce)

Add https://github.com/dommmel/jekyll-youtube to the plugin

What did you expect to happen?

What happened instead?

It worked locally but failed on github pages due to the fact that the plugin is not considered as safe.

Additional information

• Link to the live site (if applicable):
• Link to the source repo (if applicable): https://github.com/dommmel/jekyll-youtube

The development is not very active but the project is so simple that it just works. I'm currently creating a pull request to improve it.

[wknd]

You can accomplish the same by using includes.

For instance adding the following to a post:

{% include youtube.html id=dQw4w9WgXcQ %}

And create a youtube.html file in your includes folder containing:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

(I copied that code by clicking the share button on a random youtube video and pasting the code it provided in here, it has a few options to generate slightly different code if you're into that)

Although this strategy doesn't have a custom youtube tag you don't have to install any 3rd party code and you could easily modify the template to fit into your website better without having to fork the plugin.

I hope this helps :wink:

[RoyiAvital]

@wknd , This is a really nice trick.

Is there a way to set more parameters by the include? For instance, Id' like to control the Width and Height from the include string.

I tried something like:

<!-- Call it with {% include youtube.html id=dQw4w9WgXcQ width=850 height=375 %} -->

<iframe width="{{ include.width }}" height="{{ include.height }}" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[wknd]

Yes you can use as many parameters as you'd like. If it isn't working you might need to use quotes: {% include youtube.html id="dQw4w9WgXcQ" width="850" height="375" %} or it might try to use the content of a variable named dQw4w9WgXcQ (which would probably be set to undefined). In your include itself you can do anything you'd be able to do in a regular template. So you can also set a default height by using height="{{ include.height | default: 560}}

Be sure to check out the jekyll and Liquid documentation.

This issue should probably be closed though and more questions directed to stackexchange or something.

[RoyiAvital]

@wknd , Indeed it required " but only for the id. I wonder what are the rules. Could it be that numeric values doesn't require " while text does require?