0

こんにちは、ワイド スクリーン用に設計されたページがあるので、CSS スタイル シートを作成して、画像などのサイズを 2 つの小さいサイズで動作するように変更しましたが、ビデオ コンポーネントは同じままです。この問題にどのように取り組むかについての提案。

URLはここにありますhttp://tinyurl.com/6q4pz92

HTML 5ビデオを使用しようとしていますが、これが私のコードです

            <!-- styles for html 5 video -->
            <link href="video-js/video-js.css" rel="stylesheet">
           <video id="sms1_video"class="video-js vjs-default-skin" controls
         preload="auto" width="900" height="600" poster="images/sms/AnimationScreen_SMSXMAS.jpg"
        data-setup="{}">
           <source src="images/interactive/SMS_2011ChristmasAnimation.mp4" type="video/mp4" /><!-- MPEG4 for Safari -->
            <source src="images/interactive/SMS_2011ChristmasAnimation.webm" type="video/webm" /> 
             </video>
4

1 に答える 1

1

html 要素で幅と高さを宣言しています。

 <video id="sms1_video"class="video-js vjs-default-skin" controls
     preload="auto" width="900" height="600" poster="images/sms/AnimationScreen_SMSXMAS.jpg"
    data-setup="{}">

CSS に何を入れても、ビデオは 900 x 600 のままです。

代わりに、これを width=100% に変更し、高さコンポーネントを削除します。次に、ビデオにラッパーを配置し、CSS でサイズを変更できます。

完全な説明については、この役立つチュートリアルを参照してください。

http://www.netmagazine.com/tutorials/create-fluid-width-videos

編集: あなたのサイトには次のコードがあります:

<div class="videowrapper"><video id="sms1_video" class="video-js vjs-default-skin" controls="" preload="auto" width="100%" poster="images/sms/AnimationScreen_SMSXMAS.jpg" data-setup="{}">
       <source src="images/interactive/SMS_2011ChristmasAnimation.mp4" type="video/mp4"><!-- MPEG4 for Safari -->
       <source src="images/interactive/SMS_2011ChristmasAnimation.ogv" type="video/ogg"> <!-- Ogg Theora for Firefox 3.1b2 -->
        <source src="images/interactive/SMS_2011ChristmasAnimation.webm" type="video/webm"> 
         </video>
</div>

<div class="videowrapper">cssで幅または高さが必要です。ブラウザのサイズに基づいてサイズを変更するメディア クエリを使用して、これを設定できます。

于 2012-04-10T18:55:33.447 に答える