2017-09-13 25 views
0

Google Chromeブラウザ(Windows/Mac)を使用すると、次のコードはページが読み込まれたときにビデオプレビューを表示しますが、ほぼ1秒後にプレビューが消えます。私はこれを5つの異なるコンピュータでGoogle Chromeブラウザで試しました。しかし、Google Chromeブラウザを搭載した他のコンピュータでは、プレビューは消えませんでした(私の試行の1/6が正常に動作します)。埋め込みビデオがページの読み込み直後に消える

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<style type="text/css" media="all"> 
.container { 
    overflow: hidden; 
} 
</style> 
</head> 

<body> 
    Video 1:<br /> 
    <div class="container"> 
     <div> 
      <iframe 
       frameborder="0" 
       src="https://www.youtube.com/embed/juqyzgnbspY" 
       width="385" height="217" 
       align="left" 
      > 
      </iframe> 
     </div> 
    </div> 
    Video 2:<br /> 
    <div class="container"> 
     <div> 
      <iframe 
       frameborder="0" 
       src="https://www.youtube.com/embed/juqyzgnbspY" 
       width="385" height="217" 
       style="float:left" 
      > 
      </iframe> 
     </div> 
    </div> 
</body> 

</html> 

ここであなたはjsfiddle持っている:あなたが上見ることができるようにhttps://jsfiddle.net/rqwb5L67/

Google Chromeのを使用することを忘れないでください)

を、コードには2種類があります。 1つは属性alignを使用し、もう1つはcssプロパティfloat(iframeに)を使用しています。

これはなぜ起こっているのですか?

これは、より大きいコードの最小化されたバージョンです。したがって、私は自分のニーズに合ったソリューションを探すためにさまざまなソリューションを試す必要があります。

ありがとうございました。

答えて

0

オーバーフローの隠れたスタイルを削除してください...

フィデルドが更新されました。

https://jsfiddle.net/rqwb5L67/2/

あなたのdivに高さと幅、その後のiframeを与える

Video 1:<br /> 
<div class="container"> 
    <div class="frame1"> 
     <iframe 
      frameborder="0" 
      src="https://www.youtube.com/embed/juqyzgnbspY" 
      width="385" height="217" 

     > 
     </iframe> 
    </div> 
</div> 
Video 2:<br /> 
<div class="container"> 
    <div> 
     <iframe 
      frameborder="0" 
      src="https://www.youtube.com/embed/juqyzgnbspY" 
      width="385" height="217" 
      style="float:left" 
     > 
     </iframe> 
    </div> 
</div> 


.frame1{ 
    width:100%; 
    height:217px; 
    text-align:center; 
} 
関連する問題