كيف يمكنك اضافة فيديو يوتوب في خلفية موقعك بشكل احترافي ! | مدونة الحماية | طريقك نحو التميز

تبادل اعلاني

دروس المدونة

كيف يمكنك اضافة فيديو يوتوب في خلفية موقعك بشكل احترافي !

| نشره : SINCE19TEST | نشر في: اخر الاخبار , دروس المدونة , عالم النت | 0 تعليقات

2013-12-30_131044

مرحبا،
سأقدم لكم في هذه التدوينة طريقة جعل أي فيديو من اليوتوب خلفية لمدونتك للحصول على مدونة أكثر أناقة وجمال، شاهد المعاينة أسفله

للمعاينة..

لتركيب هذه الإضافة على مدونتك إذهب إلى لوحة تحكم إدارة مدونتك وإضغط على القالب ثم تحرير Html ثم إبحث على هذا الكود: </head> وضع فوقه مباشرة الكود التالي :

<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>

لا تنسى تغير هذا الرمز 61BLn00AN_w برمز الفيديو الذي تريد أن يكون خلفية لمدونتك، شاهذ الصورة التالية التي تبين كيفية الحصول عليه:

%D8%AE%D9%84%D9%81%D9%8A%D8%A9-%D9%81%D9%8A%D8%AF%D9%8A%D9%88-%D9%84%D9%84%D8%A8%D9%84%D9%88%D8%AC%D8%B1

الآن إبحث في قالبك عن <body> إن لم تجده في قالبك فابحث عن هذا الكود:

<body expr:class='"loading" + data:blog.mobileClass'>

وضع تحته مباشرة هذا الكود:

الآن أصبحت لدينا علامة DIV مفتوحة إن قمنا بحفض القالب سيشعرنا بأنه هناك خطأ في الوسم بودي ولغلق علامة DIV إبحث عن هذا الكود : </body> وضع فوقه مباشرة علامة غلق DIV التالية:

ومبروك عليك الإضافة لا تنسى أن تضغط لايك هنا

هل أعجبك الموضوع ؟

مواضيع مشابهة :

ضع تعليقا

ليست هناك تعليقات :

إرسال تعليق

شاركونا بارائكم الهامة لنا :D

جميع الحقوق محفوظة 2014/2012