11

YouTube 埋め込みコード (iframe コード) を Web ページに挿入し、css column-count を使用して、ページ内のテキストを自動的に 2 列に分割しました。

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

問題は、最初のビューポートの後に YouTube ビデオを埋め込むと、黒い画像として表示されることです。例を次に示します: http://jsfiddle.net/KTvCV/689/。これは youtube と chrome のバグのようです。この問題の解決策/修正はありますか? さまざまなことを試してみましたがうまくいかなかったので、CSS 列数の代わりに jQuery 列化を使用することを考えました。

4

4 に答える 4

2

この問題を再現する際の問題 - 観察

Chrome が iframe 埋め込みビデオを複数列形式で表示しようとすると、非常に一貫性のない動作が見られます。

以下は、一貫して問題を解決していないようです。

  1. <p>行の長さに関係する癖かもしれないと思って、テキストの周りにタグを付けてみました。

  2. キャッシュをクリアしてみました。

  3. 列の幅の変更

  4. iframe のサイズを変更する

さらに、フォールド以下のビデオはレンダリング（ペイント？）されていないようです。

機能するケース

適切にレンダリングされると思われる唯一の状況は、最初の列に表示される 1 つのビデオです。

なぜそうなのかはわかりません。

于 2013-04-04T11:51:32.360 に答える
2

私はこの問題を抱えて<iframe>いました.widthposition: relativez-indextransform: translate3d(0, 0, 0)

OS X Yosemite 10.10.3 の Chrome 43.0.2357.130 (64 ビット) での経験

于 2015-06-25T18:15:11.867 に答える
0

YouTube ビデオと column-count を組み合わせることで問題を確認できます。http://codepen.io/djschoone/pen/VYdaOvは、何が起こっているかを示しています。ビデオが別の位置に移動します。

HTML

<html>
 <body>
   <article class="display-2col">
   <p>Text</p>
   <p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&amp;autoplay=0&amp;wmode=opaque&amp;controls=0&amp;showinfo=0" width="614"     height="370" class="video-filter video-youtube vf-gustb3vs4ky" frameborder="0">    </iframe></p>
    </article>
  </body>
</html>

CSS

.display-2col{
  -moz-column-count:2;
  -moz-column-gap:20px;
  -webkit-column-count:2;
  -webkit-column-gap:20px;
  column-count:2;
  column-gap:20px;
}

IE や FF との違いは、Chrome では動画がタグ付きで配置されるのに対し、他の動画ではタグが提供されることです。

ポジショニングの関係もあると思います。調べてみたら！

于 2015-02-26T16:30:07.207 に答える