I came across a weird issue on google chrome which seems to be new because I'm pretty sure it worked before (on older version).

```css
.container {
  width: 400px;
  height: 266px;
  overflow: hidden;
  position: relative;
  border: 2px solid red;
  margin-bottom: 30px;
}

iframe {
  position: absolute;
  width: 480px; 
  height: 350px; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
  overflow:hidden;
}
```

```html
<div class="container">
  <iframe src="https://www.youtube.com/embed/Bm8N_pf7LuU" frameborder="0"></iframe>
</div>

<div class="container">
  <iframe src="https://codepen.io/" frameborder="0"</iframe>
</div>
```

You see that the first container contains a youtube iframe and is bigger than the container, but with overflow:hidden it shouldn't be visible and 'cutted' on the sites. But google chrome is not able to do this anymore (all other browsers works fine). The second container just contains a normal page and there the hidden overflow works well, so I guess it's somehow related to video embeds (vimeo embeds = the same issue). It seems like a bug from their site.

Do you have any workaround for this?