画像/ビデオ全体の画像を縦横比で表示

Question

私は、画面全体をカバーする私のウェブサイト上にビデオヘッダーを作成しました。アスペクト比が変更された場合（例えば、ポートレート）、ビデオまたは画像（背景のビデオをサポートしないデバイスの場合）は画面全体を満たさない。

これは、今どのように見えるかです：

は

Answer 1

<div id="stosto" class="header-video" style="overflow:hidden;"> 
    <img src="/templates/passage/vidhead/img/elodyposter.jpg" 
     class="header-video__media"   
     data-teaser="/templates/passage/vidhead/video/headerv" 
     data-video-width="1172" 
     data-video-height="552"> 
    </div> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="/templates/passage/vidhead/js/modernizr.js"></script> 
<script src="/templates/passage/vidhead/js/script.js?v1.1"></script> 
<script> 
    $(document).ready(function() { 
    $('.header-video').each(function(i, elem) { 
     headerVideo = new HeaderVideo({ 
      element: elem, 
      media: '.header-video__media', 
      playTrigger: '.header-video__play-trigger', 
      closeTrigger: '.header-video__close-trigger' 
     }); 
    }); 
    }); 
</script> 
</div>