/* --------------------- Konfigurationsbereich ----------------------- */


.youtube-video { /* Die alles umschließende Box */
  margin-top: 2rem;     /* oberer Abstand zum darüberliegenden Element, Einheiten: px, em, rem */
  margin-bottom: 2rem;  /* unterer Abstand zum darunterliegenden Element */
  margin-left: auto;
  margin-right: auto;   /* beide auto: zentriert; margin-right: 0: rechtsbündig */
}

.youtube-video button::before { /* Play-Button */
  content: url('YouTube-Play-Button.svg'); /* Datei-Pfad des Play-Buttons, relativ zu dieser css-Datei */
  width: 60px;  /* Breite des Play-Buttons */
  height: 42px; /* Höhe des Play-Buttons */
}

.youtube-video button span { /* Hinweistext unter dem Play-Button */
  --hinweistext: YouTube kontaktieren und Video laden;
  color: white;
  background-color: #222;
  padding: 5px 10px;
  border-radius: 6px;
  margin-top: 14px;
}

.youtube-video figcaption { /* Video-/Bildbeschriftung */
  color: gray;
  text-align: left;   /* left, center, right */
  margin-top: 0.4rem; /* Abstand zwischen Vorschaubild/Video und Bildbeschriftung */
}


/* ---------------------- ab hier nichts ändern ----------------------- */


.youtube-video > img { /* Vorschaubild vor Ausführung des Scriptes */
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.youtube-video > div { /* responsive Box, vor allem für den Iframe, vorübergehend aber auch für das Vorschaubild */
  height: 0;
  position: relative;
  background-color: #eee; /* damit bei längeren Ladezeiten (und nur dann) kein Loch, sondern eine hellgraue Box zu sehen ist */
}

.youtube-video > div > * { /* = img, iframe */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube-video figcaption:empty {
  display: none;
}


.youtube-video iframe {
  border: none;
  background-color: transparent;
}

.youtube-video button {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  background-color: transparent;
  padding: 0;
  border: none;
  margin: 0;
  cursor: pointer;
}

.youtube-video button::before {
  display: block;
  margin: 0 auto;
}

.youtube-video button span {
  display: inline-block;
}