html - video.js(mobile)v 向け動画プレーヤーの流動的な設計

Question

video.js を使用して、モバイルで動画を視聴するためのページを作成しました。コードスニペット：

<video id="intro_video" class="video-js vjs-default-skin"  controls poster='img' preload="auto" data-setup="{}">
 <source src="v.webm" type="video/webm" /> 
 <source src="v..ogg" type="video/ogg" /> 
 <source src="v.mp4" type="video/mp4" />  
       </video>

私が直面している問題は、デフォルトの幅と高さを取ることです.CSSで高さと幅を指定すると、.

流体設計を使用して幅と高さが必要な場合の解決策が必要です。

私はこのcssソリューションを使用しました：

@media only screen and (min-width: 992px) and (max-width: 1280px) {
#intro_video,#video_wrap {height:640px;
                 width:992px}

#intro_video_html5_api{height:640px;
                 width:992px}
}

/* VERTICAL TABLET LAYOUT: 768px - 991px
----------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#intro_video,#video_wrap {height:480px;
                 width:640px}
#intro_video_html5_api{height:480px;
                 width:640px}
}




/* WIDE MOBILE LAYOUT: 480px - 767px
----------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #intro_video {height:320px;
                 width:480px}
 #intro_video_html5_api   {height:320px;
                 width:480px}
}

しかし、それは私を助けませんでした。