*** YouTube Video einbinden - WordPress Quellcode ***


# 1. CODE FÜR RESPONSIVE GRÖSSE
Beispiele: 900px Breite & 16:9 Ratio


## 1. A) MODERNER RESPONSIVE CODE (mit DIV & Aspect-Ratio)

Dieser modernere Code hängt stärker daran, dass der Browser und WordPress die CSS-Eigenschaft aspect-ratio sauber akzeptieren. In normalen modernen Browsern ist das kein Problem, aber bei einem alten WordPress kann passieren, dass beim Speichern die moderne CSS-Eigenschaft aspect-ratio aus dem Inline-Style entfernt wird.

<div class="youtube-embed-wrapper" style="width: 100%; max-width: 900px; margin: 2rem auto; box-sizing:border-box;">
  <iframe style="display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;" title="YouTube Video" src="https://www.youtube-nocookie.com/embed/xxx" loading="lazy" allowfullscreen></iframe>
</div>


### 1. A) optional: vollständiger mit YouTube-allow

<div class="youtube-embed-wrapper" style="width: 100%; max-width: 900px; margin: 2rem auto; box-sizing: border-box;">
  <iframe style="display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;" title="YouTube Video" src="https://www.youtube-nocookie.com/embed/xxx" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>



## 1. B) CODE FÜR RESPONSIVE GRÖSSE (mit 2 DIV-Tags)

Das ist der klassische Legacy-Code. Er funktioniert auch in alten Browsern & Themes zuverlässiger, weil padding-bottom seit Ewigkeiten unterstützt wird.

<div class="youtube-embed-wrapper" style="position: relative; width: 100%; max-width: 900px; margin: 2rem auto; padding-bottom: 56.25%; height: 0; overflow: hidden;">
	<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" title="YouTube Video" src="https://www.youtube-nocookie.com/embed/xxx" allowfullscreen></iframe>
</div>


### 1. B) optional: noch sicherer mit 2 DIV-Tags

<div class="youtube-embed-wrapper" style="max-width: 900px; margin: 2rem auto 1rem auto;">
  <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" title="YouTube Video" src="https://www.youtube-nocookie.com/embed/xxx" allowfullscreen></iframe>
  </div>
</div>



# 2. CODE FÜR FESTE GRÖSSE (von YouTube)
Beispiel: Standard-Größe 560x315px

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/xxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


www.seo-woman.de

Beitrag mit Tipps: https://www.seo-woman.de/youtube-video-einbinden/