Day 24 在網頁中插入YouTube影片

2024 iThome 鐵人賽

DAY 24

自我挑戰組

從零開始的ＨＴＭＬ系列第 24 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-09-04 23:55:14

80 瀏覽

分享至

在網頁製作中，插入YouTube影片是一個簡單而常見的操作。首先，你可以直接使用YouTube的嵌入功能。當你在YouTube上找到想要嵌入的影片時，點擊“分享”按鈕，然後選擇“嵌入”，此時會生成一段<iframe>代碼。這段代碼可以直接複製並貼到你的HTML文件中。

將此<iframe>代碼插入到HTML文件的適當位置，通常是在<body>標籤內。你可以通過修改width和height屬性來調整影片的顯示尺寸。此外，還可以設置allowfullscreen屬性，使影片能夠全螢幕播放。

在以下範例中，我們使用<iframe>來嵌入YouTube影片，同時用CSS設計了一個video-container來保持影片的16:9比例，這確保了影片在不同大小的螢幕上都能以正確比例顯示。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube 影片嵌入範例</title>
    <style>
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>嵌入YouTube影片</h1>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>