Followers

30 Julai 2012

Julai 30, 2012 - No comments

Video Sebagai Background



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


0 ulasan:

Catat Ulasan