Modifikasi Tampilan Video Youtube Responsive Valid Html5 Seo Friendly

Seiring dengan makin berkembangnya kala responsive di dunia internet, maka satu hal yang perlu mengikuti perkembangan zaman ialah embed video pada website. Salah satu website yang menyediakan embed video untuk disimpan di website ialah Youtube.

Nah kali ini aku akan share modifikasi tampilan video Youtube yang responsive, valid HTML5, dan juga seo friendly.

Sebenarnya beberapa waktu yang kemudian aku sudah share cara memodifikasi tampilan video Youtube ini, namun videonya belum responsive, untuk mengingatnya kembali silahkan simak postingannya pada link di bawah ini.

Baca juga: 

• Bikin Tampilan Video Youtube Di Blog Seperti Televisi Yuk!
• Modifikasi Tampilan Video Youtube Di Blog

Nah kali ini kita akan menambahkan sedikit instruksi semoga videonya menjadi responsive dan modifikasi yang digunakan yaitu modifikasi pada link kedua yaitu Modifikasi Tampilan Video Youtube Di Blog.

Agar tampilannya tetap sama namun menjadi responsive, silahkan gunakan instruksi CSS di bawah ini:

 .videoyoutube{
     text-align: center;
     background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
     border:1px solid #A8A8A8;
     border-radius:5px;
     margin:20px auto;
     width:80%;
     box-shadow: 1px 30px 30px -26px #818181;
 }
 .video-responsive {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   margin:8px;
 }
 .video-responsive iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border:0;
 }

Untuk instruksi padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan instruksi HTML di bawah ini untuk memunculkan videonya di postingan:

 <div class="videoyoutube">
 <div class="video-responsive">
 <div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
     </div>
     </div>

Silahkan ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.

Kemudian simpan instruksi javascript iframe loader video Youtube di bawah ini DI ATAS instruksi </body>

 <script type='text/javascript'>
 //<![CDATA[
 setTimeout(function(){
 $('.video-youtube').each(function(){
 $(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
 //]]>
 </script>

Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library menyerupai di bawah ini (berapa pun versinya)

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Selesai....

Sebagai LIVE DEMO-nya silahkan nikmati video Geisha - Lumpuhkan Ingatanku di bawah ini. Silahkan coba resize layar monitor Anda dengan menekan tombol CTRL + Scroll Atas / Bawah pada keyboard dan mouse Anda, atau coba test halaman ini dengan responsive tool.

DEMO

Resource: http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design

Sumber https://www.kompiajaib.com/

Share this post