組み込みのYoutubeビデオのアスペクト比を変更する

<!DOCTYPE HTML> 
<head> 
<style> 

    body { 
     overflow: hidden; 
     margin:0; 
    }  
</style> 

</head> 
<body> 


    <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&showinfo=0" frameborder="0" allowfullscreen></iframe> 


<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>  

<script> 

    $(function(){ 
     $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' }); 

     $(window).resize(function(){ 
     $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' }); 
     }); 
    }); 

</script> 
</body>

サイズを変更すると、iframeをビデオで縮小する方法はありますか？現在サイズが変更されると、大きな黒い隙間があり、ビデオは真ん中に座っています。組み込みのYoutubeビデオのアスペクト比を変更する

出典

2016-04-27 Velibor Nikolic

以下のサイトをご覧ください。私はそれが応答性の埋め込まれたビデオを必要とするあなたの答えがあると思います。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

https://coolestguidesontheplanet.com/videodrome/youtube/

それがお役に立てば幸いです。

javascriptを使用する代わりに、CSSを使用する方が簡単かもしれません。

出典

2016-04-27 05:06:23

ここにjavascriptが必要ありません。あなたは純粋なCSSでこれを行うことができます。

これは、ブートストラップはそれをしない方法である：

は、ブラウザがが適切に任意のデバイス上スケーリングすること固有比を作成することによって、それらを含有するブロックの幅に基づいて、ビデオやスライドショーの寸法を決定することを可能にします。 16by9動画の

http://codepen.io/partypete25/pen/XdPGmb?editors=1100#

使用：4by3の動画の

.embed-responsive-16by9 { 
    padding-bottom: 56.25%; 
}

を使用します。

.embed-responsive-4by3 { 
    padding-bottom: 75%; 
}

出典

2016-04-27 06:08:03 partypete25

組み込みのYoutubeビデオのアスペクト比を変更する

答えて

関連する問題