Demo Animasi Lakon “Pada Suatu Ketika : Youtube & Vimeo” di Halaman Posting Blogdetik

17 Dec 2011

Menampilkan berbagai media seperti halnya Youtube, Vimeo atau file video dan audio lainnya seperti .mov, .mp4 dan .mp3 serta file flash (.swf) dan yang lain di halaman posting Blogdetik dan blogger bukanlah sesuatu yang sulit dilakukan. Di bawah ini adalah demo yang dihasilkan melalui iframe/media preview dari jQuery plugin dalam bentuk sangat sederhana dengan kemampuan cukup handal untuk menampilkan menampilkan berbagai bentuk media. Beberapa demo akan ditampilkan di halaman berbeda untuk memperlihatkan preview beberapa media yang lain. Bagi sobat yang ingin menggunakan di blogger atau blogspot silahkan ikuti juga tutorial cara menggunakannya di gubhugreyot.blogdetik.com. Untuk lebih memperjelas bagaimana berbagai media yang akhirnya dapat dengan mudah ditampilkan di halaman blog tanpa harus menggunakan tag iframe, beberapa demo telah disediakan meskipun harus dipecah dalam 4 bagian demo secara terpisah. Pemisahan beberapa demo ini hanya bertujuan untuk menjaga agar loading tidak terlalu berat serta menghindari crash.

Iframe content » Youtube Trailer

Lakon Pada Suatu Ketika : Animasi Karya Anak Bangsa

Link Video Youtube : http://www.youtube.com/embed/iHkgtMfuvGU (lihat box di bawah!), dapat diambil dari “kode embed” yang terdapat disetiap video yang ditampilkan. Anda dapat juga mengupload video anda sendiri untuk kemudian diambil “embed kode-nya” agar bisa ditampilkan di halaman blog. Trik menampilkan video Youtube anda di blog bertujuan untuk membuat semakin banyak orang yang membuka file video anda!”.

Kode HTML :

<h3>Iframe content &raquo; Youtube Trailer</h3> <a class="GRprev_iframe {width:600, height:455, type:'iframe'}" href="http://www.youtube.com/embed/iHkgtMfuvGU">Lakon Pada Suatu Ketika : Animasi Karya Anak Bangsa</a>

width:600 dan height:465 merupakan ukuran width dan height media yang akan ditampilkan (iframe). Sesuaikan dengan setiap media yang digunakan. Ukuran yang lebih variatif terutama digunakan pada media gambar (image), dimana anda harus menuliskan sesuai ukuran image.

Iframe content » Audio/Video (.mp4)

Video/Audio format .mp4

Pada media video/audio dengan ekstensi .mp4, ukuran tinggi dan lebar diseduaikan dengan tinggi (height) dan lebar (width) file yang tersedia. Berbagai pilihan ukuran bergantung pada editing yang telah anda lakukan melalui software yang banyak tersedia (ulead, photoshop dll) atau mungkin hasil convert yang dilakukan melalui convert audio/video online.

Kode HTML :

<h3>Iframe content &raquo; Audio/Video (.mp4)</h3> <a class="GRprev_video {width:400, height:315}" href="http://demojqueryprojects.comule.com/video/master200_gubhugreyot_cewek_linglung.mp4?&autoplay='0'">Video/Audio format .mp4 </a>

Iframe content &raquo Image (.jpg)

Image preview

width dan height pada image disesuaikan dengan ukuran image. Gunakan ukuran lebar maksimal sesuai lebar halaman posting

Kode HTML :

<h3>Iframe content &raquo Image (.jpg)</h3> <a class="GRprev_iframe {width:630, height:242}" href="http://uc.blogdetik.com/156/156457/files/2011/12/img_car-blue-thunder.jpg">Image preview</a>

Iframe Content » form login Blogdetik

Content: Login Blogdetik

Media html tidak ditentukan perbandingan width dan heigh. Anda dapat menggunakan height sesuai selera, hanya pada lebarnya yang disesuaikan dengan lebar halaman posting.

Kode HTML :

<h3>Iframe Content &raquo; form login Blogdetik</h3> <a class="GRprev_iframe {width:350, height:470, type:'iframe'}" title="Iframe Content Login Blogdetik" href="http://blogdetik.com/wp-login.php">Content: Form Login Blogdetik</a>

Tunggu tutorialnya di gubhugreyot.blogdetik.com


TAGS Media & Iframe preview jQuery


-

Author

Follow Me