CSS cơ bản dành cho responsive video youtube

CSS 16

CSS cơ bản dành cho responsive video youtube By boyquang on 27th July 2025 03:40:50 PM

1. CSS cơ bản dành cho responsive video:
/* Đảm bảo padding 0 và box-sizing phù hợp */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #000;
color: #fff;
padding: 10px;
}
/* Container cho video */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
height: 0;
overflow: hidden;
}
/* iframe video Youtube */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Responsive text và layout */
h1, h2, h3, p {
font-size: 1rem;
line-height: 1.5;
}
/* Tùy chỉnh thêm cho màn hình nhỏ */
@media (max-width: 768px) {
body {
font-size: 14px;
padding: 8px;
}
h1 {
font-size: 20px;
}
}
2. HTML mẫu tương ứng:
Bạn cần đảm bảo rằng iframe YouTube nằm trong .video-container như sau:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/q6f_a6viEBI" frameborder="0" allowfullscreen></iframe>
</div>
3. Gợi ý thêm (nếu bạn nhúng video qua PHP):
Trong file player_video.php, đảm bảo phần nhúng iframe giống như:
<?php
$url = $_GET['url'];
parse_str(parse_url($url, PHP_URL_QUERY), $params);
$videoId = $params['v'] ?? '';
if ($videoId) {
echo '<div class="video-container">';
echo '<iframe src="https://www.youtube.com/embed/' . htmlspecialchars($videoId) . '" allowfullscreen></iframe>';
echo '</div>';
} else {
echo 'Video không hợp lệ';
}
?>
https://boyquang.com/player_video.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dq6f_a6viEBI

Raw Paste

1. CSS cơ bản dành cho responsive video:

/* Đảm bảo padding 0 và box-sizing phù hợp */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #000;
    color: #fff;
    padding: 10px;
}

/* Container cho video */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
    height: 0;
    overflow: hidden;
}

/* iframe video Youtube */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive text và layout */
h1, h2, h3, p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Tùy chỉnh thêm cho màn hình nhỏ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding: 8px;
    }

h1 {
        font-size: 20px;
    }
}

2. HTML mẫu tương ứng:

Bạn cần đảm bảo rằng iframe YouTube nằm trong .video-container như sau:

3. Gợi ý thêm (nếu bạn nhúng video qua PHP):
Trong file player_video.php, đảm bảo phần nhúng iframe giống như:

<?php
    $url = $_GET['url'];
    parse_str(parse_url($url, PHP_URL_QUERY), $params);
    $videoId = $params['v'] ?? '';
    if ($videoId) {
        echo '<div class="video-container">';
        echo '<iframe src="https://www.youtube.com/embed/' . htmlspecialchars($videoId) . '" allowfullscreen></iframe>';
        echo '</div>';
    } else {
        echo 'Video không hợp lệ';
    }
?>

https://boyquang.com/player_video.php?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dq6f_a6viEBI