21 Ağustos 2015 Cuma

Blogunuzun arkaplanına Youtube video ekleyin

Bazıları blog arkaplanına resim veya görüntü yerine nasıl video ekleyebileceğimizi merak ediyor.Artık jQuery plugin Tubular sayesinde blogumuzun arkaplanına Youtube videolarını ekleyebiliriz.

Blogunuzun arkaplanına video eklemeniz çok çekici gelebilir fakat 3 tane dezavantajını da söylemek zorundayım.Videoyu susturamazsınız,eğer videoda reklam varsa reklamları kaldıramazsınız ve yükleyeceğiniz video sayfa yüklenme hızınızı oldukça azaltır.Eğer bunu eklemeyi düşünüyorsanız sadece özel durumlar için eklemenizi tavsiye ederim.Bunun bir örneğini veya demosunu görmek için burayı tıklayın.





Eğer blogunuzun arkaplanına video eklemek isterseniz alttaki adımları takip edin:

Adım 1:Blog şablonunuza gidin ve CTRL+F kombinasyonu yardımıyla alttaki kodu bulun:

</head>

Adım 2:Yukarıda bulduğunuz kodun hemen üstüne alttaki iki kodu ekleyin:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
});//]]></script>


Adım 3:Şimdi <body> kodunu bulun.Ve hemen altına alttaki kodu ekleyin:

<div id='wrapper-video'>

Adım 4:</body> kodunu bulup bu kodun hemen üstüne alttaki tagı ekleyin:


</div>

Adım 5:Değişiklikleri kaydedin.


-Kırmızı yerle belirtilen yeri video İD'niz ile değiştirin.Video İD video url'sinin sonundaki kodtur:alttaki resimde olduğu gibi:





-Bir daha uyarmak istiyorum eğer video yüklerseniz sesleri susturamazsınız bunun için sesiz video ve görüntü kalitesinin iyi olması için HD video yüklemenizi tavsiye ederim.