1721

themes/Ying/layouts/shortcodes/video.html

@@ -38,21 +38,28 @@
   {{ $src := .Get "src" }}
   {{ $poster := .Get "poster" }}
   {{ $caption := .Get "caption" }}
+  {{ $loop := .Get "loop" | default "false" }}
+  {{ $muted := .Get "muted" | default "false" }}
+  {{ $isGifMode := or (eq $loop "true") (eq $muted "true") }}
   {{ $videoSrc := $src }}
   {{ if not (hasPrefix $src "http") }}
     {{ $videoSrc = printf "/%s/%s" .Page.Slug $src }}
   {{ end }}
 
   <div class="video-wrap">
-    <figure class="video-player" onclick="toggleVideo(this)">
+    <figure class="video-player{{ if $isGifMode }} gif-mode{{ end }}" onclick="toggleVideo(this)">
       <video
         preload="metadata"
         playsinline
         webkit-playsinline
+        {{ if eq $loop "true" }}loop{{ end }}
+        {{ if eq $muted "true" }}muted{{ end }}
+        {{ if $isGifMode }}autoplay{{ end }}
         {{ with $poster }}poster="{{ . }}"{{ end }}
       >
         <source src="{{ $videoSrc }}">
       </video>
+      {{ if not $isGifMode }}
       <div class="video-play-icon">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
       </div>
@@ -73,6 +80,7 @@
           <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
         </button>
       </div>
+      {{ end }}
     </figure>
     {{ with $caption }}
     <figcaption class="video-caption">{{ . }}</figcaption>