feat: add video shortcodes

content/posts/video/index.md

@@ -0,0 +1,52 @@
++++
+title = "Video"
+date = 2023-06-04
+[taxonomies]
+categories = ["media"]
+tags = ["content", "shortcode"]
+[extra]
+subtitle = "Shortcodes for videos"
++++
+
+## Vimeo
+
+input: 
+
+```rs
+{{/* vimeo(id="4340383") */}}
+```
+
+- `id`: the video id (mandatory)
+- `autoplay`: when set to "true", the video autoplays on load (optional)
+- `loop`: when set to "true", the video plays on a loop (optional)
+- `noautopause`: when set to "true", the video will not autopause (optional)
+- `title` - set alt title for the iframe (optional, defaults to "Vimeo")
+- `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
+
+output:
+
+```html
+{{ vimeo(id="4340383") }}
+```
+{{ vimeo(id="4340383") }}
+
+## YouTube 
+
+input:
+
+```rs
+{{/* youtube(id="frBzlP6t9Gw") */}}
+```
+
+- `id`: the video id (mandatory)
+- `playlist`: the playlist id (optional)
+- `autoplay`: when set to "true", the video autoplays on load (optional)
+- `title` - set alt title for the iframe (optional, defaults to "Youtube")
+- `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
+
+output:
+
+```html
+{{ youtube(id="frBzlP6t9Gw") }}
+```
+{{ youtube(id="frBzlP6t9Gw") }}

sass/_base.scss

@@ -282,6 +282,39 @@ td:last-child {
   }
 }
 
+.video-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.video-embedded {
+  position: relative;
+  height: 0;
+  max-width: 100%;
+  padding-top: 56.25%;
+  overflow: hidden;
+}
+
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+embed,
+iframe,
+object {
+  max-width: 100%;
+}
+
+iframe {
+  border-style: none;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  overflow: hidden;
+  }
+
 figure > table {
   display: block;
   overflow-x: auto;

templates/partials/head.html

@@ -18,7 +18,7 @@
   <meta name="base" content="{{ config.base_url | safe }}"/>
   <meta name="referrer" content="strict-origin-when-cross-origin"/>
   {% if config.extra.csp %}
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self'; img-src 'self' {% if page.extra.image %}{% if page.extra.image is starting_with("https://") %}{{ page.extra.image }}{% endif %}{% endif %} {% if config.extra.home_image is starting_with("https://") %}{{ config.extra.home_image }}{% endif %} {% if config.extra.post_list_image is starting_with("https://") %}{{ config.extra.post_list_image }}{% endif %} {% if config.extra.default_post_image is starting_with("https://") %}{{ config.extra.default_post_image }}{% endif %}{% if page.extra.csp_img %}{%for url in page.extra.csp_img %} {{ url }}{% endfor %}{% endif %}{% if section.extra.csp_img %}{%for url in section.extra.csp_img %} {{ url }}{% endfor %}{% endif %}; script-src 'self' {% if config.extra.giscus %}giscus.app/client.js{% endif %}; manifest-src 'self'; style-src 'self' {% if page_image_hash %}'sha512-{{ page_image_hash | safe }}'{% else %}'sha512-{{ default_post_image_hash | safe }}'{% endif %} 'sha512-{{ main_images_hash | safe }}' {% if config.extra.giscus %}giscus.app/default.css{% endif %}; media-src 'self'; frame-src 'self' {% if config.extra.giscus %}giscus.app{% endif %}; object-src 'none'; base-uri 'self'; form-action 'self'">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src 'self'; img-src 'self' {% if page.extra.image %}{% if page.extra.image is starting_with("https://") %}{{ page.extra.image }}{% endif %}{% endif %} {% if config.extra.home_image is starting_with("https://") %}{{ config.extra.home_image }}{% endif %} {% if config.extra.post_list_image is starting_with("https://") %}{{ config.extra.post_list_image }}{% endif %} {% if config.extra.default_post_image is starting_with("https://") %}{{ config.extra.default_post_image }}{% endif %}{% if page.extra.csp_img %}{%for url in page.extra.csp_img %} {{ url }}{% endfor %}{% endif %}{% if section.extra.csp_img %}{%for url in section.extra.csp_img %} {{ url }}{% endfor %}{% endif %}; script-src 'self' {% if config.extra.giscus %}giscus.app/client.js{% endif %}; manifest-src 'self'; style-src 'self' {% if page_image_hash %}'sha512-{{ page_image_hash | safe }}'{% else %}'sha512-{{ default_post_image_hash | safe }}'{% endif %} 'sha512-{{ main_images_hash | safe }}' {% if config.extra.giscus %}giscus.app/default.css{% endif %}; media-src 'self'; frame-src 'self' https://player.vimeo.com/ https://www.youtube.com/ https://www.youtube-nocookie.com/ {% if config.extra.giscus %}giscus.app{% endif %}; object-src 'none'; base-uri 'self'; form-action 'self'">
   {% endif %}
   <meta name="robots" content="index,follow">
   <meta name="theme-color" content="#2C2D32"/>

templates/shortcodes/video.html

@@ -0,0 +1,5 @@
+<div class="video-embedded">
+  <video height="520" {% if autoplay %}autoplay{% endif %} {% if controls %}controls{% endif %}>
+    <source src="{{ src }}" type="{{ 'video/' ~ type }}">
+  </video>
+</div>

templates/shortcodes/vimeo.html

@@ -0,0 +1,10 @@
+<div class="video-embedded">
+  <iframe
+    src="https://player.vimeo.com/video/{{id}}?embedded=true{% if autoplay %}&autoplay=1{% endif %}{% if loop %}&loop=1{% endif %}{% if noautopause %}&autopause=0{% endif %}{% if not cookie %}&dnt=1{% endif %}"
+    class="video-iframe"
+    title="{{ title | default(value='Vimeo') }}"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen>
+  </iframe>
+</div>

templates/shortcodes/youtube.html

@@ -0,0 +1,9 @@
+<div class="video-embedded">
+  <iframe
+    src="https://www.youtube{% if not cookie %}-nocookie{% endif %}.com/embed/{{ id }}{% if autoplay %}?autoplay=1{% endif %}"
+    class="video-iframe"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen>
+  </iframe>
+</div>