30 Julai 2012

Video Sebagai Background

Tiada ulasan:
 


Cara untuk letakkan video sebagai background berbanding warna atau gambar.Beberapa perkara perlu diambil perhatian,ianya tak boleh dibisukan,jika video ada iklan,yang mungkin boleh melambatkan loading blog,jadi jika sesorang mahu gunakannya,mungkin ingin meletakkannya pada blog yang loading dengan cepat.

Demo di sini

Cara Pemasangan
Login ke blogger dashboard-->Klik Design-->Edit HTML

Paste kedua dua kod di bawah selepas kod <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /* jQuery tubular plugin |* by Sean McCambridge |* http://www.seanmccambridge.com/tubular |* Copyright 2012 |* licensed under the MIT License |* Enjoy. |* |* Thanks, |* Sean */ var videoWidth = 853; var videoRatio = 16/9; var defaultDiv = 'wrapper-video'; jQuery.fn.tubular = function(videoId,wrapperId) { wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId; t = setTimeout("resizePlayer()",1000); jQuery('html,body').css('height','100%'); jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>'); jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99}); var ytplayer = 0; var pageWidth = 0; var pageHeight = 0; var videoHeight = videoWidth / videoRatio; var duration; var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>'; jQuery('#ytapiplayer').html(iframe); jQuery(window).resize(function() { resizePlayer(); }); return this; } function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("myytplayer"); ytplayer.setPlaybackQuality('medium'); ytplayer.mute(); } function resizePlayer() { var newWidth = jQuery(window).width(); var newHeight = jQuery(window).height(); jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight); if (newHeight > newWidth / videoRatio) { newWidth = newHeight * videoRatio; } jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio); } //]]> </script>
<script type='text/javascript'> //<![CDATA[ $().ready(function() { $('body').tubular('7gZd4b6bXu4','wrapper-video'); }); //]]> </script>

Seterusnya cari tag <body> Jika guna Template Designer cari baris ni:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Dibawah antara yang mana satu,pastekan kod ni
<div id='wrapper-video'>
Akhir sekali sebelum kod </body>,pastekan kod ni
</div>
Save.Pada nombor yang dimerahkan,letak ID Video YouTube,iaitu id yang terdapat pada akhir url


Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger