Modifikasi Tampilan Video Youtube Di Blog

Modifikasi Tampilan Video Youtube Di Blog

Bola Hero Gawai

Modifikasi Tampilan Video Youtube Di Blog

Modifikasi Tampilan Video Youtube
Kita tahu bahwa di Youtube terdapat jutaan video, mulai dari musik, film, dan lain-lain. Mungkin Anda sendiri mempunyai video sendiri yang Anda unggah ke Youtube. Dan tentunya video dari Youtube bisa kita simpan dengan cara meng-copy kode embed videonya untuk disimpan di blog.

Tampilan video dari Youtube ini menurut saya sederhana sekali karena hanya berbentuk segi empat. Nah jika Anda peduli sama tampilan blog, mari kita rubah sedikit tampilan video Youtube ini menjadi sedikit lebih berkesan menarik untuk ditampilkan di blog, sehingga para pengunjung lebih betah dan tertarik untuk nonton videonya.

Sebenahnya pada postingan terdahulu saya sudah sharing cara memodifikasi tampilan video Youtube ini menjadi seperti televisi yang tentunya menggunakan background gambar televisi.
Nah kali ini kita tidak akan menggunakan gambar sebagai background-nya agar tidak menambah size blog terlalu besar. Kita hanya memanfaatkan box shadow agar terkesan melayang dan background gradien.

Untuk memodifikasi tampilan video dari Youtube ini silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

.vidyoutube{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:10px auto 40px;padding:8px 8px 5px;width:500px;box-shadow: 1px 30px 30px -26px #818181}
.vidyoutube object{border:0}

Kemudian untuk menampilkan videonya di postingan, silahkan gunakan kode html di bawah ini.
<div class="vidyoutube">
<object width="500" height="281" data="//www.youtube.com/embed/121WomHqiNk"></object>
</div>

Kode yang berwarna merah adalah url embed videonya. Kode di atas juga menjadikan video Youtube menjadi valid HTML5. Seperti yang sudah saya bahas di link di bawah ini.
Untuk demonya seperti pada video Youtube di bawah ini. Videonya dari RAISA - Pemeran Utama.

Mudah bukan? Selamat mencoba....

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
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!

×
×
×