BoldGrid/boldgrid-theme-framework

[Feature] Make embedded videos more responsive

jessecowens opened this issue · 1 comments

Is your feature request related to a problem? Please describe.
If a video is embedded (either via the Add Media button, shortcode, or using a PPB block) the height of the iframe remains constant regardless of screen width.
Peek 2021-04-23 12-19

Describe the solution you'd like
CSS similar to the following can be added to video element divs:

.bg-video {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.bg-video iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Peek 2021-04-23 12-21

Could be duplicate of #68