CSS 響應式網頁設計中的影片

在響應式網頁設計中，確保影片能夠正確適應佈局非常重要。影片應該擴充套件以填充整個內容區域，同時保持其原始縱橫比。

當指定影片的固定寬度或高度時，可能會在非常大或非常小的螢幕上導致佈局問題，例如破壞頁面佈局、扭曲形狀或在影片周圍顯示黑條。影片周圍的黑條稱為信箱式（在影片的頂部和底部）、柱箱式（在影片的左側和右側）以及視窗式（在影片的四周）。

因此，使用相對單位（如百分比）而不是絕對值（如畫素）來設定寬度和高度屬性非常重要。絕對值會限制影片的響應性。

使用 width 屬性實現響應式影片

為了使影片根據螢幕尺寸進行縮放，我們需要將影片的寬度屬性設定為 100%，並將高度設定為 auto。

video {
    width: 100%;
    height: auto;
}

透過這種方式設定樣式，使影片佔據其父元素的 100% 寬度，並且高度將被調整以保持影片的縱橫比。此設定允許影片隨螢幕尺寸縮放。但是，在非常大的螢幕上，影片可能會超出其自然寬度，使其看起來變形。

示例

在此示例中，顯示的影片將根據輸出視窗的螢幕尺寸進行縮放。在 Tutorialspoint 的HTML 編譯器中執行此程式碼以調整輸出視窗寬度並進行驗證。

<!DOCTYPE html>
<html>

<head>
    <style>
        video {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The video will cover 100% width
    </p>
    <video width="400" controls>
        <source src="/css/foo.mp4" type="video/mp4">
   </video>
</body>

</html>

使用 max-width 屬性實現響應式影片

上述方法有一個缺點，在大型螢幕上，影片會超出其自然尺寸進行拉伸。為了防止這種情況，我們可以使用max-width屬性代替 'width' 屬性。

video {
    max-width: 100%;
    height: auto;
}

透過這種方式設定影片屬性，如果需要，影片將縮小，但永遠不會放大到超過其原始尺寸。

示例

在此示例中，顯示的影片將根據輸出視窗的螢幕尺寸進行縮放，但永遠不會縮放超過其自然尺寸。在 Tutorialspoint 的HTML 編譯器中執行此程式碼以調整輸出視窗寬度並進行驗證。

<!DOCTYPE html>
<html>

<head>
    <style>
        video {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <p>
        The video will cover 100% width if natural width is less than
        output screen width
    </p>
    <video width="400" controls>
        <source src="/css/foo.mp4" type="video/mp4">
    </video>
</body>

</html>

向示例網頁新增影片

以下示例演示瞭如何在網頁中使用響應式影片。根據影片的 max-width 值，影片將根據螢幕尺寸進行縮小。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
    * {
        box-sizing: border-box;
    }

    .title {
        border: 2px solid black;
        padding: 10px;
        background-color: blanchedalmond;
    }

    .grid-one {
        width: 60%;
        float: left;
        padding: 10px;
        border: 2px solid black;
        background-color: darkseagreen;
    }

    .grid-two {
        width: 40%;
        float: left;
        padding: 15px;
        border: 2px solid black;
        background-color: lightgreen;
    }

    ul {
        list-style-type: none;
    }

    li {
        background-color: aqua;
        padding: 5px;
        border: 1px solid black;
        margin: 5px;
    }

    video {
        max-width: 100%;
        height: auto;
    }
    </style>
</head>

<body>
    <div class="title">
        <h1>Responsive Web Design</h1>
    </div>

    <div class="grid-two">
    <ul>
        <li>Viewport</li>
        <li>Grid view</li>
        <li>Media queries</li>
        <li>Images</li>
        <li>Videos</li>
        <li>Frameworks</li>
    </ul>
    </div>

    <div class="grid-one">
        <h1>Responsive Videos</h1>
        <p>
            Alike images, videos can be made responsive too, such 
            that the video should expand to fill the entire content 
            area, while maintaining its original aspect ratio.
        </p>

        <video width="400" controls>
            <source src="/css/foo.mp4" type="video/mp4">
        </video>
        <p>
            Resize the browser window to see how the content gets 
            responsive to the resizing.
        </p>
    </div>
</body>

</html>

列印頁面