為了使iframe中的視頻自適應頁面大小，您可以使用CSS控制其寬度和高度。這裡是一個簡單的示例，展示如何使用CSS來實現iframe的自適應大小調整。
- 在HTML文件中，將iframe嵌入到一個包裝元素（例如
<div>）中，並為該包裝元素分配一個類名（例如video-container）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
- 在CSS文件（例如
styles.css）中，使用以下CSS樣式來控制video-container和iframe的大小：
/* 設置iframe的寬度和高度為100%，以適應包裝元素的大小 */
iframe {
width: 100%;
height: 100%;
}
/* 設置包裝元素的寬度和高度，並設置寬度為100%以適應父元素的寬度 */
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 設置寬高比為16:9，可根據需要更改 */
overflow: hidden;
}
/* 使iframe相對於包裝元素定位，以保持寬高比 */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
}
這個示例使用了16:9的寬高比，您可以根據需要更改padding-bottom的值來設置不同的寬高比。使用這種方法，iframe中的視頻將根據頁面大小自動調整，並始終保持正確的寬高比。
發布者：彬彬筆記，轉載請註明出處：https://www.binbinbiji.com/zh-hant/css/3091.html
