YouTube iFrameビデオの対応方法

私のホームページにはYouTubeのビデオがあります - >https://delicateseams.com/左のコンテンツブロックのページの途中にあります。YouTube iFrameビデオの対応方法

ビデオサムネイルはモバイルデバイスでは反応しません。

誰かがYouTubeの動画のサムネイル画像を反応させる方法を知っていますか？

2017-11-19 H. Ferrence

はそれを試していないが、しかし、あなたはあなたのCSSのモバイルデバイス用のCSSセクションを追加することができます。唯一の画面と@media（MAX-デバイス幅：SOMEWIDTH）{ \t //あなたのiframeのサイズはここ、おそらく100％} –

まさに@AramBecker ...それはCSSがどのように見えるかの問題になります。私は 'background-image：contains'、' width：100％ '、' mx-width：100％ 'を試しました。 –

私は自分の携帯電話にいます今私は自分のPCに手を入れてすぐにあなたのページのソースを見ます –

私はあなたの問題を集めることができますから、iframeとその親は固定幅（600px）を持っていますが、その周りのフレックスレイアウトはそれをはるかに小さくすることができます（小さなブラウザウィンドウ。？「自分の限界を超えるパネルやビデオフロー

多分これはあなたのニーズに似たものである

.flex-wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.video-wrapper { 
 
    min-width: 40%; 
 
    max-width: 600px; 
 
    height: 100%; 
 
    margin: 10px 10px; 
 
    flex: 1 1 auto; 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    .video-wrapper { 
 
    min-width: 360px; 
 
    } 
 
} 
 

 
.ratio-keeper { 
 
    position: relative; 
 
    padding-top: 56.25%; 
 
} 
 

 
.right-panel { 
 
    width: 360px; 
 
    flex: 0 0 auto; 
 
} 
 

 
.bordered { 
 
    border: 1px solid black; 
 
    padding: 0px 10px; 
 
    margin: 0px 10px; 
 
} 
 

 
.video-frame { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="flex-wrapper"> 
 
    <div class="video-wrapper"> 
 
     <div class="ratio-keeper"> 
 
     <iframe class="video-frame"src="https://www.youtube.com/embed/X_tYrnv_o6A?rel=0" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    <div class="right-panel"> 
 
     <div class="bordered"> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et elit feugiat, finibus orci a, ultricies velit. Proin ac cursus magna, nec dapibus orci. Cras aliquet magna vitae enim faucibus consequat. Morbi nisl lacus, porta nec imperdiet tempus, dictum vitae ligula. Etiam quis tincidunt lorem, quis viverra orci. Quisque scelerisque, odio sit amet congue laoreet, dui ipsum congue ligula, sed varius mi turpis ac velit. Integer id sem a nunc tincidunt scelerisque non ut magna. Duis in mauris ut eros finibus malesuada. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

JSFiddle：https://jsfiddle.net/m1tLp64m/

私はそれをまだテストしていませんが、そのアイデアが役に立ちます。私は、あなたの "Stay in touch"ボックスを固定幅にしたいと思っています。少なくとも、それはあなたのウェブページにどのように見えるかです。これは、どのような方法で助け

希望:)

出典

2017-11-21 20:28:13

YouTube iFrameビデオの対応方法

答えて

関連する問題