Webdesign, WordPress

Vimeo fullscreen embed CSS

Wenn ihr Vimeo in fluide responsive Designs einbaut, packt WordPress das in einen iFrame der irgendwelche absoluten Standardmaße eingibt. Dieses Code-Snippet im CSS ermöglicht das auf die komplette Breit auszuweiten, wenn Gutenberg aktiviert ist und ihr das Video über den Gutenberg-Block Vimeo eingebunden habt.

Hier kommt es aber auf das Seitenverhältnis an! Bitte ansonsten das „padding-top“ ändern.

.wp-block-embed__wrapper {
  position: relative;
  display: block;
  width: 100%%;
  overflow: hidden;
}

.wp-block-embed__wrapper::before {
  display: block;
  content: "";
  padding-top: 56.25%%; //Seitenverhaeltnis anpassen (16:9)
}

.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%%;
  height: 100%%;
  border: 0;
}