Hugo. Видео во вкладках

Размещение видео во вкладках на сайте.

1 Прагматика

• Из-за проблем с Youtube было принято решение размещать видео параллельно на RuTube.
• Размещение видеофайлов последовательно выглядит несколько громоздко и несколько смущает пользователя.
• Принято решение размещать видео с разных хостингов на вкладках.

2 Реализация

• Релизация строится на добавлении сокращений для вкладок (см. Hugo. Вкладки).
• Проблема: При использовании сокращения tab отображается не видеоплеер, а код.
• Причина: Код внутри сокращения обрабатывается как Markdown.
• Путь решения: Нужно запретить обработку кода внутри сокращения.

2.1 Использовать стандартное поведение сокращения

• Если после сокращения идёт непосредственно символ < (без пробела), то внутреннее содержание сокращения дальше не обрабатывается.
• Предподагается, что там может быть html-код.
• Возникшая проблема: первая вкладка отрабатывает ожидаемым образом, последующие же всё равно обрабатывают содержимое как Markdown.

2.2 Создание специального сокращения

• Вводится сокращение rtab (raw tab):

{{ $tabName := .Get "tabName" }}
{{ $tabID := delimit (shuffle (slice "a" "b" "c" "d" "e" "f")) "" }}
{{ .Parent.Scratch.Add "tabName" (slice $tabName) }}
{{ .Parent.Scratch.Add "tabID" (slice $tabID) }}

<div class="tab-pane fade show {{ if eq .Ordinal 0 }}active {{ end }}" id="{{ $tabID }}" role="tabpanel" aria-labelledby="nav-1">

        {{ $.Inner }}

</div>

• Здесь оригинальная конструкция

  {{ $.Inner | markdownify }}
  

  заменена на

  {{ $.Inner }}
  

• Следует разместить этот файл в каталоге layouts/shortcodes сайта.

3 Использование

• Код:

  {{< tabs tabTotal="2" >}}
  {{< rtab tabName="Rutube" >}}
  
  {{< rutube 1bea1bcf9215678e8ccf797187cc52fd >}}
  
  {{< /rtab >}}
  {{< rtab tabName="VKvideo" >}}
  
  {{< vkvideo oid="606414976" id="456239113" hd="2" >}}
  
  {{< /rtab >}}
  {{< rtab tabName="Youtube" >}}
  
  {{< youtube ysEdxhyYl8k >}}
  
  {{< /rtab >}}
  {{< /tabs >}}
  

• Отображение:

  <div class="embed video-player">
    <iframe class="rutube-player" type="text/html"
  	  width="647" height="364"
  	  src="https://rutube.ru/play/embed/1bea1bcf9215678e8ccf797187cc52fd"
  	  webkitAllowFullScreen mozallowfullscreen allowFullScreen
  	  allow="clipboard-write" frameborder="0">
    </iframe>
  </div>
  

  <div class="embed video-player">
    <iframe class="vkvideo-player" type="text/html"
      src="https://vkvideo.ru/video_ext.php?oid=606414976&id=456239113&hd=2"
      width="647" height="364" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen>
    </iframe>
  </div>
  

  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
        <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/ysEdxhyYl8k?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"></iframe>
      </div>
  
  tabe widget