Cara menyematkan Video Youtube Responsive

Cara menyematkan Video Youtube Responsive – terkadang ketika kita menyematkan video youtube tampilanya tidak mengikuti ukuran browser , alias tidak responsive , ketika di buka di handphone akan terpotong bahkan melebar .

cara ini bisa di gunakan di opencart wordpress dll , meskipun wordpress sudah ada plugin untuk video youtube tapi jika sekedar menyematkan beberapa video sebaiknya gunakan cara ini supaya loading web tidak terlalu lambat .

 

Untuk menampilkan seperti video di atas tidak terlalu sulit ya karena berdasarkan pengalaman saya hanya membutuhkan beberapa script saja untuk bisa menampilkan video youtube seperti gambar di atas, perlu di ketahui juga script untuk menampilkan video tersebut saya coba jalankan di localhost ternyata di localhost juga berjalan dengan lancar walaupun refreshnya agak lama.

kenapa harus responsive ??

di dunia yang semakin maju ini mayoritas orang menggunakan gadget untuk mencari informasi , nah jika video yang kita sematkan di web kita tidak responsive ,

maka orang yang melihatnya akan kesulitan dan bahkan akan menekan tombol kembali untuk mencari informasi yang lainya

maka dari itu video yang kita letakan di website harus responsive .

dan kali ini bwm akan menjelaskan Cara menyematkan Video Youtube Responsive  ,

langsung saja yah pertama tama kita harus membuka video youtube yang akan kita letakan di website

Nah selanjutnya di bagian bawah ada bagikan klik tab bagikan namun jangan di bagikan yah , pilih sematkan

lalu salin dulu kodenya di notepade

selanjutnya

copy kode ini

style type=”text/css”>.video-container {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class=”video-container”>
<p>KODE YOUTUBE ANDA
</div>

selanjutnya salin ke notepade

silahkan letakan kode youtube anda yang tadi di salin di notepade ganti dengan kode youtube anda lalu , setelah itu paste di website anda , ingat salinya di bagian html yah ..

video yang di sematkan tadi akan mengikuti sesuai dengan ukuran browser anda alias responsive ,

silahkan langsung saja di praktekan ,