Bug with youtube embed when using css 'column-count'

Question

I inserted a youtube embed code (the iframe code) in a webpage, and used css column-count to automatically divide text in the page to two columns.

.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}

The problem is when i embed youtube video after the initial viewport it is shown as black image. Here is an example: http://jsfiddle.net/KTvCV/689/. Seems this is bug with youtube and chrome. Is there any solution/fix for this issue? Tried different things and not working so thinking to go with jQuery columnizer instead of CSS column count.

Answer 1

I had this problem, for me the fix was to give the <iframe> an explicit width in pixels, position: relative, z-index, and a 3d-transform such as transform: translate3d(0, 0, 0).

Experienced in Chrome 43.0.2357.130 (64-bit) for OS X Yosemite 10.10.3

Answer 2

For me, only adding transform: translate3d(0, 0, 0) on my <video> tag worked.

Note: I use a <video> tag, not an embedded <iframe> YouTube video. But I had the same problem with columns.

Answer 3

Trouble Replicating This Problem - Observations

I am seeing very inconsistent behavior with Chrome trying to display iframe embedded videos in a multi-column format.

The following did not seem to clear the problem consistently:

1. I tried putting <p> tags around the text thinking it might be line length related quirk.

2. I tried clearing the cache.

3. Changing the width of the column

4. Changing the dimensions of the iframe

In addition, videos below the fold seem not to be rendered (painted?).

Once Case That Works

The only situation that seems to render well is having a single video that appearing in the first column.

I don't know why this is the case.