Merge pull request #196 from Mitrichius/add-video-shortcode

Add video shortcode

README.md

@@ -275,6 +275,10 @@ If you use webmention.io you can also enable pingback with `pingback: true`
 ### Disabling comments per-page basis
 Add `disableComments: true` to post front matter.
 
+## Custom shortcodes
+### Video (for local videofiles)
+Example: `{{< video src="/media/movie.mp4" type="video/mp4" preload="auto" caption="Some caption" alt="Some alt" >}}`
+
 ## Contributing
 
 If you find a bug or have an idea for a feature, feel free to write an [issue](https://github.com/mitrichius/hugo-theme-anubis/issues) or make a PR.

assets/css/main.css

@@ -537,6 +537,13 @@ article figcaption {
     margin-bottom: 2em;
 }
 
+article video {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  margin: 0 auto .5em;
+}
+
 code.has-jax {
     -webkit-font-smoothing: antialiased;
     background: inherit !important;

i18n/en.yaml

@@ -59,4 +59,7 @@ toNewPost:
   other: "to new post"
 
 toOldPost:
-  other: "to old post"
+  other: "to old post"
+
+videoIsNotSupported:
+  other: "Your browser does not support video"

i18n/ru.yaml

@@ -56,4 +56,7 @@ toNewPost:
   other: "к новой записи"
 
 toOldPost:
-  other: "к старой записи"
+  other: "к старой записи"
+
+videoIsNotSupported:
+  other: "Ваш браузер не поддерживает видео"

layouts/shortcodes/video.html

@@ -0,0 +1,20 @@
+<video 
+    class="video-shortcode" 
+    preload="{{ .Get "preload" | default "auto" }}" 
+    controls
+>
+    <source 
+        src="{{ .Get "src" }}" 
+        type="{{ .Get "type" }}"
+        {{ if or (.Get "alt") (.Get "caption") }}
+            alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
+        {{ end }}
+    >
+    {{ i18n "videoIsNotSupported" }}
+</video>
+{{ if .Get "caption" }}
+    <figcaption>
+        {{ .Get "caption" | markdownify }}
+    </figcaption>
+{{ end }}
+