title: Google Chrome issue on overflow hidden when embedding video (youtube/vimeo)
body: <p>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).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;iframe src="https://www.youtube.com/embed/Bm8N_pf7LuU" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;iframe src="https://codepen.io/" frameborder="0"&lt;/iframe&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>Do you have any workaround for this?</p>