Webdesign, WordPress

Vimeo Embed fullscreen CSS

When you include Vimeo in fluid responsive designs, WordPress puts it in an iFrame that enters some absolute default dimensions. This code snippet in the CSS allows you to extend this to the full width if Gutenberg is enabled and you have included the video via the Gutenberg Vimeo block.

But here it depends on the aspect ratio! Otherwise please change the „padding-top„.

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

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

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