vuepress - Youtube Videos einbinden

Neue CSS Elemente

Die Datei style.styl wurde um CSS Elemente erweitert:

.video-block {
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  width: 100%; height: auto;}

.video-block iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;}

1
2
3
4
5
6
7
8
9
10
11

Einbindung in die Markdowndatei

Das Video selbst wird dann in der Markdown Datei der jeweiligen Seite mit der neuen <div class="video-block"> eingebettet.

Mit der rechten Maustaste und der Auswahl Einbettungscode kopieren im entsprechenden Video auf YOutube erhalten wir den Einbettungscode., den wir dann manuell anpassen.

Aus

<div class="video-block">
    <iframe width="1280" height="720"
      src="https://www.youtube.com/embed/bp0w2KrlE7c?ecver=1" frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>
</div>

1
2
3
4
5
6
7

wird

<div class="video-block">
    <iframe max-width=100% height=auto
      src="https://www.youtube.com/embed/bp0w2KrlE7c?ecver=1" frameborder="0"
      allow="encrypted-media"
      allowfullscreen>
    </iframe>
</div>

1
2
3
4
5
6
7

In dem Beispiel wurde aus dem Youtube emmbeded Code der Teil width="1280" height="720" gegen max-width=100% height=auto ausgetauscht und unter allow=u.a. das autoplay entfernt.