Vidio youtube tampil didekstop 50% diseluler 100%
.video-responsive-container {position: relative; overflow: hidden;
padding-top: 56.25%; background-color: #000; box-sizing: border-box;
margin-bottom: 20px; }
.video-responsive-container iframe { position: absolute; top: 0; left: 0;
.video-wrapper {width: 100%; margin: 0 auto; float: none; padding: 0;}
@media screen and (min-width: 769px) {.video-wrapper {width: 50%; float: left;
margin-right: 20px; margin-left: 0;}}
.clearfix::after {content: "";clear: both; display: table;}
</style>
<div class="video-container">
<div class="video-wrapper">
<div class="video-responsive-container">
<iframe src="https://www.youtube.com/embed/R_WD9UIxNFI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>
/* --- CSS untuk Kontainer Video Responsif (YouTube/Vimeo) --- */
.video-responsive-container {
position: relative;
overflow: hidden;
padding-top: 56.25%; /* Untuk rasio 16:9, sesuaikan jika beda */
background-color: #000;
box-sizing: border-box;
margin-bottom: 20px; /* Jarak bawah video */}
.video-responsive-container iframe { /* Hanya menarget iframe, bukan object */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;}
/* --- Pengaturan Lebar & Posisi Berdasarkan Tampilan --- */
.video-wrapper {
width: 100%; /* Default: Lebar 100% untuk tampilan mobile */
margin: 0 auto; /* Tengah di mobile */
float: none; /* Pastikan tidak ada float di mobile */
box-sizing: border-box;
padding: 0; /* Hapus padding di wrapper jika tidak diinginkan */}
/* Untuk Desktop (lebar 50% dan rata kiri) */
@media screen and (min-width: 769px) {
.video-wrapper {width: 50%; /* Lebar 50% untuk desktop */
float: left; /* Rata kiri di desktop */
margin-right: 20px; /* Jarak ke kanan jika ada konten di sampingnya */
margin-left: 0; /* Pastikan tidak ada margin kiri otomatis dari auto */}}
/* Clearfix untuk mengatasi float jika ada konten di bawah video */
.clearfix::after {content: ""; clear: both; display: table;}
</style>
<div class="video-wrapper">
<div class="video-responsive-container">
<iframe src="https://www.youtube.com/embed/R_WD9UIxNFI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></div>
Vidio aspect ratio unggahan blogger tampil didekstop 50% diseluler 100%
padding-top: 56.25%; background-color: #000; box-sizing: border-box;
margin-bottom: 20px; }
.video-responsive-container iframe { position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border: 0;}
.video-wrapper {width: 100%; margin: 0 auto; float: none; padding: 0;}
@media screen and (min-width: 769px) {.video-wrapper {width: 50%; float: left;
margin-right: 20px; margin-left: 0;}}
.clearfix::after {content: "";clear: both; display: table;}
</style>
<div class="video-container clearfix">
<div class="video-wrapper">
<div class="video-responsive-container">
<object class="BLOG_video_class" contentid="6e2f78a594e18039" height="100%" id="BLOG_video-6e2f78a594e18039" width="100%"></object></div></div>
<div class="video-wrapper">
<div class="video-responsive-container">
<object class="BLOG_video_class" contentid="6e2f78a594e18039" height="100%" id="BLOG_video-6e2f78a594e18039" width="100%"></object></div></div>
<div class="video-wrapper">
<div class="video-responsive-container">
<object class="BLOG_video_class" contentid="6e2f78a594e18039" height="100%" id="BLOG_video-6e2f78a594e18039" width="100%"></object></div></div>
<div class="video-wrapper">
<div class="video-responsive-container">
<object class="BLOG_video_class" contentid="6e2f78a594e18039" height="100%" id="BLOG_video-6e2f78a594e18039" width="100%"></object></div></div>
<div class="video-wrapper">
<div class="video-responsive-container">
<object class="BLOG_video_class" contentid="6e2f78a594e18039" height="100%" id="BLOG_video-6e2f78a594e18039" width="100%"></object></div></div>
</div>
Vidio aspect ratio unggahan blogger
<style>
.video-wrapper {position: relative; width: 100%; aspect-ratio: 16 / 9;
background-color: #000; overflow: hidden;}
.video-wrapper object {position: absolute; top: 0; left: 0; display: block; width: 100%;
height: 100%; border: none; }</style>
<div class="video-wrapper"><object class="BLOG_video_class"
contentid="6e2f78a594e18039"
id="BLOG_video-6e2f78a594e18039"
width="100%" height="100%">
</object></div>
Vidio disamping teks di dekstop
<style>
.video-responsive-container {position: relative; overflow: hidden;
padding-top: 56.25%; background-color: #000; box-sizing: border-box;
margin-bottom: 20px; }
.video-responsive-container iframe { position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border: 0;}
.video-wrapper {width: 100%; margin: 0 auto; float: none; padding: 0;}
@media screen and (min-width: 769px) {.video-wrapper {width: 50%; float: left;
margin-right: 20px; margin-left: 0;}}
.clearfix::after {content: "";clear: both; display: table;}
</style>
<div class="video-container">
<div class="video-wrapper">
<div class="video-responsive-container">
<iframe src="https://www.youtube.com/embed/R_WD9UIxNFI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div style=" float: left;"> </div></div></div>
Video dengan Teks di Samping (Responsif)
Abang, silakan edit kembali Gadget HTML/JavaScript Abang (atau buat Gadget baru) dan GANTI SELURUH isinya dengan kode ini:Tentu saja bisa, Abang sayang! Kita bisa membuat teks muncul di samping video saat di desktop dan kemudian teksnya akan otomatis berpindah ke bawah video saat di mobile. Ini adalah pola desain responsif yang sangat umum dan efektif.
Kita akan menggunakan teknik float di CSS pada kontainer video, yang memungkinkan teks untuk "mengelilingi" video.Tentu saja bisa, Abang sayang! Kita bisa membuat teks muncul di samping video saat di desktop dan kemudian teksnya akan otomatis berpindah ke bawah video saat di mobile. Ini adalah pola desain responsif yang sangat umum dan efektif.
Kita akan menggunakan teknik float di CSS pada kontainer video, yang memungkinkan teks untuk "mengelilingi" video.Tentu saja bisa, Abang sayang! Kita bisa membuat teks muncul di samping video saat di desktop dan kemudian teksnya akan otomatis berpindah ke bawah video saat di mobile. Ini adalah pola desain responsif yang sangat umum dan efektif.
Kita akan menggunakan teknik float di CSS pada kontainer video, yang memungkinkan teks untuk "mengelilingi" video.
<div class="video-wrapper">
<div class="video-responsive-container">
<iframe src="https://www.youtube.com/embed/R_WD9UIxNFI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>
tulis catatan disini