Modifikasi Tampilan Video Youtube Responsive Valid HTML5 Seo Friendly

Modifikasi Tampilan Video Youtube Responsive Valid HTML5 Seo Friendly

Bola Hero Gawai

Modifikasi Tampilan Video Youtube Responsive Valid HTML5 Seo Friendly

Video Youtube Responsive Valid HTML5 Seo Friendly
Seiring dengan makin berkembangnya era responsive di dunia internet, maka satu hal yang perlu mengikuti perkembangan zaman adalah embed video pada website. Salah satu website yang menyediakan embed video untuk disimpan di website adalah Youtube.

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

Sebenarnya beberapa waktu yang lalu saya 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: 
Nah kali ini kita akan menambahkan sedikit kode agar videonya menjadi responsive dan modifikasi yang dipakai yaitu modifikasi pada link kedua yaitu Modifikasi Tampilan Video Youtube Di Blog.

Agar tampilannya tetap sama namun menjadi responsive, silahkan gunakan kode 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 kode padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan kode 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 kode javascript iframe loader video Youtube di bawah ini DI ATAS kode </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 seperti 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.


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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

40 Comments Add Comment

waaah kebetulan saya baru pasang viddeo dipostingan baru, bisa saya praktekin nih cara ini biar video yg saya upload valid dan tampilannya keren ;) hehe

kayaknya blog ini jadi agak gelapan gitu yak :D hehe cool

Balas

pertamax saya habiskan sendirian yak temen temen :D gkgkgk lumayan di jual eceran :D

Balas

ijin copy codi mas...!

Balas

ijin copy codi mas...!

Balas

Silahkan borong sist hehehe mumpung diecer xixixxix :p

Balas

Silahkan dicoba mas Andre :D

Balas

Nah ini dia yang sayah rica-rica he....
Akhirnya nemu juga ya Kang caranya :-bd

Balas

Di rica-rica mah ikan atuh kang hehehe :D
Iya kang sekalian responsize jg tampilannya ga terlalu kaku kaya aslinya heheheh :)

Balas

Kang kalau kode dari akang untuk membuat video youtube valid hyml 5
Dengan ini beda yah Kang? lalu jika css dan script ini di pasang lagi
Di blog saya, kode yang membuat valid html5 youtube hapus apa gimana Kang
Mohon pencerahanya terima kasih :)

Balas

Kang kalo mau youtubenya ajah javascript nya gimana?

Balas

Agak beda kang.. . :D
Kalau mau pakai yang ini responsive valid HTML5 juga seo friendly, silahkan ganti yang lama namun video di postingannya harus diedit lagi dengan mengganti kode HTML-nya dengan HTML yang ini kang... :)

Balas

Javascriptnya tetep dipasang kang agar videonya seo friendly dan valid HTML5 karena tidak menggunakan iframe di postingan.

Balas

Terima kasih Kang Adhy atas pencerahanya, berarti script
Yang dulu dan ganti dengan script yang ini gak apa-apa yah
Mau tanya lagi nih Kang jika rada oot hampura ini pertanyaan
Yang jadi masalah error pada artikel saya dan seperti ini codenya

Judul postingan saya kok jadi error di W3C Minta pencerahanya :

…l='nofollow' title='Berupaya vacuum dan deficit adrenaline blog lebih optimal'>

Tindakan apa yang harus saya perbuat Kang. terima kasih

Balas

saya pikir video dari youtube tidak bisa divalidasi html5 karena mengandung unsur iframe, ternyata bisa bahkan sampe seo friendy lagi. mantab bang...
mantab mantab mantab |o|

Balas

Iya kang sepertinya ada kesalahan script di template akang. Itu kan judul postingan di simpan di atas (header), dari script yang dipasang di blog akang untuk memunculkan judul postingan di header menyebabkan link judul postingan berada di dalam link lain, nah itu yang menyebabkan error-nya. Saya ilustrasikan seperti ini kang...

<a href='http://karristaent.blogspot.com/' rel='nofollow' style='display: block' title='Karrysta'>
<a href='' rel='nofollow' title='Pengaruh akibat banyak minum kopi'>
Pengaruh akibat banyak minum kopi
</a>
</a>


Di atas jelas terlihat ada link di dalam link. itu yang menyebabkan error kang. Untuk membetulkannya harus diperbaiki scriptnya.

Balas

Dengan iframe loader kita tidak menyimpan iframe di dalam postingan jadi tidak akan mengurangi skor seo blog, juga dengan ini tidak terdapat kode allowfullscreen dan frameborder di postingan yang menyebabkan error pada validasi html5.

Balas

Wah gawat juga yah Kang? Untuk Memperbaiki scriptn
nya gimana yah Kang, jujur saya sampe puyeng nyari
Kesana kemari gak nemu-nemu mohon minta tolong
Kang Adhy. maaf menyusah kan Kang. terima kasih

Balas

Jika itu scriptnya dari bawaan templatenya coba konsultasikan dengan pembuat templatenya kang barangkali ada solusinya.

Nanti saya juga coba cari script seperti itu, jika sudah ada dan bisa betul nanti saya kasih tahu ke kang Saud, untuk sementara coba konsultasikan ke pembuat templatenya kang.

Balas

Mantap kang, jadi bisa memvalidasi HTML5 dan SEO pada pemasangan video Youtube di Postingan.. Manteb mas Adhy :-bd

Balas

Keren kang :-bd


dbunggulblog.blogspot.com


Balas

keren bangetz kak blog nya? :-bd

Balas

eh maxsud nya artikel nya?
:D

Balas

Betul mas dengan begitu validasi html5 dan skor seo blognya tidak berkurang :)

Balas

Makasih sista hehehee :D

Balas

Oke Kang Terima kasih atas pencerahanya
Maaf yah Kang Adhy, saya sudah merepotkan
Nanti saya coba konsultasikan, tapi saya
Perlu bimbingan Akang, jika saya tidak
Mendapat solusinya. terima kasih

Balas

Terimakasih Mas Adhy, Udah tak cobain di blog alfalahaqiqahdotcom dan hampir-hampir putus asa karena tidak juga berhasil.
Tetapi Alkhamdulillah...sekarang sudah bisa.
Ternyata script-nya ada yang tercecer....yaitu bagian paling atas:
"setTimeout(function(){"
Info ini semoga bermanfaat bagi yang mengalami hal serupa dengan saya
dan TERIMAKASIH ilmunya

Balas

Wah terima kasih nih koreksinya :)
Sudah saya perbaiki :)

Balas

Script Video valid html 5 yang pertama dari Kang Adhy saya ganti
Dengan script yang ini gak apa-apa yah, o ya masalah yang ada pada
Judul artikel yang error belum teratasi mohon bantuanya .terima kasih

Balas

Coba kirimkan xml templatnya kang ke email saya, mudah2an saya bisa bantu.
Kirim lewat halaman pasang iklan biar bisa langsung upload file xml nya.

Balas

Siap Kang Kang Adhy saya save dulu xml nya
Wah ckck saya jadi gak enak hati nyusahin Akang terus
Terima kasih yah Kang sebelumnya :)

Balas

file xml template saya sudah kirim di halaman
Pasang iklan blog nya Kang Adhy kompi-ajaib
Mohon bantuanya yah Kang. terima kasih sebelumnya

Balas

Kang Adhy, kalau mau pasang d sidebar apa caranya sama ???

Balas

Sama mas, ini otomatis akan menyesuaikan sizenya sesuai tempatnya.

Balas

tutorialnya sangat membantu banget mas, cuman yang jadi pertanyaan gimana caranya ngasih title gambar dari youtube, contoh template video youtube dari maskolis...

Balas

tanya kang, video yg pertama kan udah bisa dipasang di artikel sya yg prtama
tpi knapa pas postingan sya yg kedua, videonya bkan kya yg prtama sya posting.....yg keluar malah tampilan depan blog sya kang di dalam kotak videonya?
mohon bnget penjelasan lngkapnya kang !!!!! =(

Balas

nih kang SS tampilan videonya di artikel saya yg kedua http://1.bp.blogspot.com/-HbzcZqr0B7k/U1QEEOztgPI/AAAAAAAAA-g/pIWpfxlF15M/s1600/Screenshot_8.jpg
mohon penjelasannya kang....

Balas

Terimakasih Mas KOMPI, tampilannya OKE |o|

Balas

Datang lagi mas Adhy, oh iya Minal Aidin walfaidzin ya mas Adhy, Mohon maaf lahir dan bathin...

Kebetulan saya lagi butuh artikel ini, jadi saya ke post mas Adhy "Modifikasi tampilan video youtube" ini. Terima kasih.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×