youtube shortcode is not working.

[soumendrak]

Bug Report

I have used an YT shortcode which was working fine withe Apollo theme. However, in tabi I am facing issue.

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

I have added this file, youtube.html under templates/shortcode

Environment

Zola version: 0.19.1 tabi version or commit: 2.13.0

Expected Behavior

Youtube video should have come as an embedding.

Current Behavior

Tell us what happens instead of the expected behavior. link

Step to Reproduce

1. Create the youtube shortcode html file.
2. Use it in any markdown post file

   Live streaming links of the conference:
   {{ youtube(id="GPkWL-9akQc") }}

3. Build and serve the site

[welpo]

Hi Soumendra!

Did you allow youtube connections through the CSP?

[soumendrak]

Thanks @welpo for the precise solution. After making the following changes, it fixed the issue.

allowed_domains = [
    { directive = "font-src", domains = ["'self'", "data:"] },
    { directive = "img-src", domains = ["'self'", "https://*", "data:"] },
    { directive = "media-src", domains = ["'self'", "https://cdn.jsdelivr.net/"] },
    { directive = "script-src", domains = ["'self'"] },
    { directive = "style-src", domains = ["'self'"] },
-    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
+    { directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube.com"] },
]

[welpo]

Glad to hear!

The example CSP example uses youtube-nocookie for privacy reasons (and because it was the default shortcode built-in with Zola until some time ago).

You might want to modify your shortcode to use the youtube-nocookie URL. The old shortcode:

<div {% if class %}class="{{class}}"{% endif %}>
    <iframe src="https://www.youtube-nocookie.com/embed/{{id}}{% if playlist %}?list={{playlist}}{% endif %}{% if autoplay %}?autoplay=1{% endif %}" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

[soumendrak]

@welpo Thanks for this snippet. Is there any reason why Zola removed this shortcode?

[welpo]

They were removed here: https://github.com/getzola/zola/commit/a56e4248e12cd0e958e5fbb48c039c85a989d238

Reasoning:

The youtube one for example had been broken for a long time and no one really noticed. It's better to not have anything than something not tested/doesn't work. Most of them were only a couple of lines anyway.

I might add Vimeo/YouTube shortcodes to tabi and mention the CSP changes necessary to make them work on the documentation.