Sebagai seorang web design, tampilan yang responsive adalah suatu keharusan yang tidak boleh ketinggalan. Karena sekarang sudah banyak sekali device dengan berbagai ukuran dari mulai yang kecil sampai segede gaban. 
Apalagi kita sedang mengerjakan wesite yang kaya akan berbagai konten yang bukan hanya text tapi juga gambar dan video. Youtube yang terkadang menjadi sumber konten yang akan kita tampilkan di website kita juga harus kita pikirkan bagaimana agar tampilannya tetap responsive ketika dibuka di berbagai device dengan rasio yang tidak berubah.
Berikut beberapa style css yang bisa kita gunakan ketika kita ingin menampilkan video youtube dengan ratio 16:9
Aspek ratio dengan width 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive YouTube Iframe</title>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Aspek ratio dengan width yang telah kita tentukan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Width YouTube Iframe with Auto Height</title>
<style>
.video-container {
position: relative;
width: 720px; /* Fixed width */
height: auto;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 0 auto; /* Center the container */
}
.video-container::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Nah itu beberapa css code agar video youtube yang kita gunakan tidak berubah rationya.
