web-dev-qa-db-ja.com

黒いバーのないレスポンシブなフルスクリーンyoutubeビデオ？

ウェブサイトにフルスクリーンのYouTubeビデオが埋め込まれています。

enter image description here

ブラウザのサイズが動画の幅と高さに比例していると、見栄えがよくなります。ただし、ブラウザーのサイズを異なる比率に変更すると、ビデオの周りに黒いバーが表示されます。

enter image description here

私が望んでいるのは、ビデオを常にウィンドウ全体に、ただしストレッチなしで埋めることです。ブラウザのサイズがビデオに比例しない場合、「過剰」を非表示にしたいです。

私が達成しようとしているのは、これら2つのWebサイトの背景にあるものです。 http://ginlane.com/ および http://www.variousways.com/ 。

YouTubeビデオでこれを行うことは可能ですか？

htmlcssvideoyoutube
22
Owly
4
Daniel Patilea

これはかなり古いですが、人々はまだここで助けを必要とするかもしれません。私もこれが必要だったので、役立つソリューションのペンを作成しました- http://codepen.io/MikeMooreDev/pen/QEEPMv

この例では、同じビデオの2つのバージョンを示します。1つは標準として、2つ目は切り取られて、中央の位置を合わせて、親の要素全体のサイズに合わせて、恐ろしい黒いバーを表示しません。

ビデオの新しい幅を計算するには、JavaScriptを使用する必要がありますが、アスペクト比がわかれば簡単です。

HTML

<div id="videoWithNoJs" class="videoWrapper">
  <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

CSS-videoWrapperの高さと幅は何でもかまいませんが、必要に応じてパーセンテージにすることもできます

.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

.videoWrapper iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}

jQuery

$(document).ready(function(){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

これは、サイズ変更時にトリガーして、応答性を維持することもできます。これを行う最も簡単な（おそらく最も効率的ではない）方法は次のとおりです。

$(window).on('resize', function() {

    // Same code as on load        
    var aspectRatio = 1.78;
    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});
9
Mike

Iframeコードの周りにコンテナdivを作成し、クラスを与えます：

<div class="video-container"><iframe.......></iframe></div>

CSSに追加します。

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

この coolestguidesontheplanet.com は、この回答のソースURLです。

8
Jithu Wilson C

同じ効果をシミュレートするために重要なのは、16：9のアスペクト比を維持することです。

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

これにより、黒いバーが削除されます。

これで、外側のコンテナを幅100％、高さ100％に設定し、オーバーフローを非表示にできます。

.banner-video{
  height: 100vh;
  overflow: hidden;
}

これで、上記のコードは、ビューポートのアスペクト比が16/9を超えるまで機能します。そのため、アスペクト比に基づいてメディアクエリを追加する必要があります。

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

この後、YouTubeビデオはすべての条件でフルビューポートサイズを維持し、ビデオの余分な部分を非表示にします。その他operaそれはすべてのブラウザでサポートされています。

5
kushal parikh

私はこれを理解するために多くの時間を費やしましたが、Flexboxを使用することで動作する簡単なCSSソリューションを次に示します。基本的には、ビデオを絶対位置と幅と高さ100％のコンテナに入れて、表示：フレックスとコンテンツの中央揃えを行います！

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

1
CreativeR

上記の回答は、上部と下部に黒いバーがある場合のためのものであるため、これを投稿しています。左右にバーがある場合はどうなりますか（左右）。このスクリプトは、2つのシナリオを処理します。

    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio < vidRatio){
    var newWidth  = wrapperWidth  * (vidRatio/wrapperRatio);
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'});

}
else{
    var newHeight  = wrapperHeight   * (wrapperRatio / vidRatio);
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'});

}
1
Tosin John

悲しいことに、これは機能していないようです。..私が何かを逃さない限り： http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});
0
user1616270

以下を使用することもできます：

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>
0
Ranjot Singh