Custom yt and vm shortcodes for youtube and vimeo

4 files changed, 23 insertions, 8 deletions

diff --git a/content/overview-embedded-vimeo.md b/content/overview-embedded-vimeo.md
index e9dc03d..319c129 100644
--- a/content/overview-embedded-vimeo.md
+++ b/content/overview-embedded-vimeo.md
@@ -12,6 +12,14 @@ Zola has many shortcodes, and new are easily added, this example shows vimeo.
 
 ## Vimeo
 
-with `vm(id="id_here" title="Youtube - Safe Systems Programming in Rust")`
+with `vm(id="id_here")`
 
-{{ vm(id="514402648" title="Youtube - Safe Systems Programming in Rust") }}
+- `id`: the video id (mandatory)
+- `class`: a class to add to the <div> surrounding the iframe (optional)
+- `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 "Youtube")
+- `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
+
+{{ vm(id="514402648") }}
diff --git a/content/overview-embedded-youtube.md b/content/overview-embedded-youtube.md
index b9787be..0bcb4f2 100644
--- a/content/overview-embedded-youtube.md
+++ b/content/overview-embedded-youtube.md
@@ -12,6 +12,13 @@ Zola has many shortcodes, and new are easily added, this example shows youtube.
 
 ## Youtube
 
-with `yt(id="the_id_here" title="Vimeo - Gnome vs KDE")`
+with `yt(id="the_id_here")`
 
-{{ yt(id="32gyFIWecuw" title="Vimeo - Gnome vs KDE") }}
+- `id`: the video id (mandatory)
+- `playlist`: the playlist id (optional)
+- `class`: a class to add to the <div> surrounding the iframe (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.
+
+{{ yt(id="32gyFIWecuw") }}
diff --git a/templates/shortcodes/vm.html b/templates/shortcodes/vm.html
index 70230fe..9b593e8 100644
--- a/templates/shortcodes/vm.html
+++ b/templates/shortcodes/vm.html
@@ -1,3 +1,3 @@
-<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
-	<iframe src="https://player.vimeo.com/video/{{id}}" title="{{title | default(value="Vimeo") }}" style="position:absolute;top:0;left:0;"></iframe>
+<div {% if class %}class="{{class}}" {% endif %}style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
+	<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 %}" title="{{title | default(value="Vimeo") }}" style="position:absolute;top:0;left:0;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>
diff --git a/templates/shortcodes/yt.html b/templates/shortcodes/yt.html
index 9ee9d1f..d865602 100644
--- a/templates/shortcodes/yt.html
+++ b/templates/shortcodes/yt.html
@@ -1,3 +1,3 @@
-<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
-	<iframe src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" title="{{title | default(value="Youtube") }}" style="position:absolute;top:0;left:0;"></iframe>
+<div{% if class %}class="{{class}}"{% endif %} style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
+	<iframe src="https://www.youtube{% if not cookie %}-nocookie{% endif %}.com/embed/{{id}}{% if playlist %}?list={{playlist}}{% endif %}{% if autoplay %}?autoplay=1{% endif %}" title="{{title | default(value="Youtube") }}" style="position:absolute;top:0;left:0;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>