اهمية هذه الاضافة :
- سرعة تحميل
- سرع في الاستجابة
- صديقة للسيو
هذا متال :
طريقة جعل فيدوهات اليوتوب سريعة الاستجابة على مدونتك
ان كنت تعاني من نفس المشكل يرجى تتبع الخطوات التالية :
1.لوحة التحكم
2.إضغط على قالب
3. ثم تحريرhtml
4.إبحث بالضغط على CTRL+F عن الكود التالي : </head>
- ثم ضع قبله الكود التالي مباشرةً :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
5.إبحث عن الكود التالي : </body>
- ثم ضع قبله الكود التالي مباشرةً :
<script type='text/javascript'>
//<![CDATA[
// Original Script by DTE :]
// Optimized and Modified by Kang Ismet
$(function() {
$('a.youtube-link').each(function() {
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1],
yt_title = $(this).text();
$(this).replaceWith('<div class="youtube-box"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>');
$('div.youtube-box').click(function() {
$(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');
});
});
});
//]]>
</script>
6.إبحث عن الكود التالي : ]]</b:skin>
- ثم ضع قبله الكود التالي مباشرةً :
.youtube-box {
text-align:center;
background-color: black;
width: 640px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.youtube-frame {
background-color: black;
width: 640px;
height: auto;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.youtube-img {
position: relative;
height: 100%;
width: 100%;
margin-top: -7%;
margin-bottom: -8.5%;
transform: scale(1.1);
}
.youtube-box span {
display:block;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.youtube-box .gradient {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboiA0LKXwPhkUuoO_dHyM5Tu8gEWU4FRCgojLVmGpApFVqJBuv7l70gLhAjkcY8cQQVnXlac5WozieF9g3lDqoPrNFAtHmgJbSD5qkKcQf-1LoNzAfdIOscUkqFlRCXsVoBwyeEDHxLY/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMICJEbO4jUAt8J85gEe78Kf8kuV54FANHI_uO07yL-hZcLXY6nPVFwsnILO5NVasojVNQRUzpYL9m_DVk9r3aczZfUEKPYZeFkDMJCX_EoDX11yR3zsrum48IpLlPi4VdnfYVANuiGk/s1600/t-title-bg.png') no-repeat 98% 50%;
font:normal 19px Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 2px black;
bottom:auto;
line-height:40px;
height:40px;
overflow:hidden;
padding:0px 15px;
text-align: left;
}
.youtube-box .youtube-play {
cursor:pointer;
width:74px;
height:52px;
top:50%;
left:50%;
margin:-26px 0px 0px -40px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObnKZszxcr5BV3wK7bAnEfLFn3Yv30Hu-mdr43QbB4Hu_1_yeV3a6vfoqenxBgN_lvHkDWiPij_fOP786-FXBNF0toGe4OURovDlmOtYVU9uVpbnAFtEO67-aln0HSGnP4Au_uSE8k48/s1600/yt-play-new.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
background-position:bottom left;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
نقوم بحفظ القالب
الان ناتي الى كود الفيديو الذي يوضع في الموضوع بالشكل التالي :
<a class="youtube-link" href="https://www.youtube.com/watch?v=Vqfy4ScRXFQ" rel="nofollow">عنوان الفيديو</a>
غير رابط الفيديو و كذلك عنوان الفيديو بالعنوان الذي تختاره للظهور كما في المثال اعلى.
EmoticonEmoticon