إظهار صورة فيديو يوتيوب في الصفحة الرئيسية دون اضافة صورة داخل التدوينة + اقرأ للمزيد لمدونات بلوجر

عدد مشاهدات الموضوع:

تساءل العديد عن كيفية اظهار صورة من فيديو اليوتيوب على الرئيسية بدون رفع أى صورة داخل التدوينة نفسها, بمعنى أسهل كيف يمكن اظهار لقطة من لقطات الفيديو المضاف داخل موضوع داخل المدونة على الرئيسية بدون استخدام صورة قبل الفيديو. قمت بالبحث عن الطريقة ووجدتها فى مدونة الرائع +David Kutcher وبرغم تدوينه للكود منذ عام 2013 الا أن كان من الصعب الوصول لها الا بعد بحث متوالى عن الاضافة وكيفية تفعيلها. فشكرا له وعلى تكويده لكود الجافا سكريبت الذى سيستخدمه كل من يريد تلك الميزة داخل قالبه.

قبل اضافة الكود يمكنك معاينة الكود بعد تفعيله على تلك المدونة التجريبية youtube-thumbs وبعد ذلك يمكنك الدخول الى قالب ثم أخذ نسخة احتياطية منه ومن ثم الدخول الى تعديل HTML ثم البحث عن الوسم التالى </head> ثم ضع الكود التالى فوقه ثم قم بحفظ القالب. 

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
// change the dimension variable below to be the max pixel width you want the thumbnails to be
var dimension = 140;
// set this to be the word count of the lead-in
var words = 80;
// set this to be left, right, none or inherit
var orientation = "left";
// set 1 for squared image or 0 for proportional,
// squared images only works for images hosted in Picasa
var square = 0;
// continuation of the introduction paragraph
var addon = "...";
// optional read more link, leave empty if you don't want it
var readmore = "Read more";
// make the image thumbnail link to the blog post
var imagelink = 1;
// image margins such as 1em or 5px
var margin = "1em";
// kill lightbox function
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
 var html = this.parentNode.innerHTML;
 this.parentNode.innerHTML = html;
 this.onmouseover = null;
};
}
}
if (imagelink){ if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
} }
$(document).ready(function() {
$('.post-body').each(function(n, wrapper){
var newContents = "";
var wrapper = $(wrapper);
var image = $(wrapper).find('img').first();
var youtubeObject = $(wrapper).find('object').first();
var youtubeFrame = $(wrapper).find('iframe').first();
var link = $(wrapper).parent().find('h2 a').attr('href');
var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
if (words > 0) textContents += addon;
wrapper.empty();
if (image.attr('src')) {
var imageOriginalHeight = image.height();
var imageOriginalWidth = image.width();
var imageParent = $(image).parent();
wrapper.append(imageParent).append(textContents);
if (square) {
image.attr({src : image.attr('src').replace(/sBd{3,4}/,'s' + dimension + '-c')});
image.attr('width',dimension).attr('height',dimension);
} else {
image.attr({src : image.attr('src').replace(/sBd{3,4}/,'s' + dimension)});
image.attr('width',dimension);
var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
image.attr('height',newHeight);
}
} else if (youtubeObject.attr('data-thumbnail-src')){
var image = $('<img>').attr('src',youtubeObject.attr('data-thumbnail-src')).attr('width',dimension).attr('height','auto');
var imageParent = $('<a>').attr('href',link).append(image);
wrapper.append(imageParent).append(textContents);
} else if (youtubeFrame.attr('src')){
var urlarray = youtubeFrame.attr('src').split("/");
var urllink = 'https://ytimg.googleusercontent.com/vi/' + urlarray[4] + '/0.jpg';
var image = $('<img>').attr('src',urllink).attr('width',dimension).attr('height','auto');
var imageParent = $('<a>').attr('href',link).append(image);
wrapper.append(imageParent).append(textContents);
} else {
wrapper.append(textContents);
}
imageParent.css('clear','none').css('float',orientation);
switch (orientation) {
case "left":
imageParent.css('margin-left',0).css('margin-right',margin);
break;
case "right":
imageParent.css('margin-left',margin).css('margin-right',0);
break;
default:
imageParent.css('margin-left',margin).css('margin-right',margin);
break;
}
if (imagelink) {
image.parent().attr('href',link);
}
if (readmore) {
wrapper.append('<br /><a href="' + link + '">' + readmore + '</a>');
} wrapper.append('<hr>');
$('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
});
});
//]]></script>
</b:if>

بعد حفظ القالب قم بانشاء موضوع جديد وقم بوضع فيديو يوتيوب بداخله دون رفع أى صور أخرى ثم انشر الموضوع وقم بمعاينة صفحة المدونة الرئيسية. ستجد أنه تم استخلاص صورة من داخل الفيديو تلقائيا دون الحاجة لرفع صورة داخل الموضوع. من مميزات الكود أنه يقوم بتفعيل خاصية أقرأ للمزيد ولذلك نفضل حذف كود اقرأ للمزيد القديم واضافة ذلك الكود لتوفير ميزتين مرة واحدة.

يمكنك الحصول على الكود من هنا أيضا وهنا مصدر الكود من مدونة المبرمج. رجاءا الحفاظ على حقوق التكويد لمدونة المبرمج وعدم تغيير روابط داخل الكود.

إضافة المصمم الرائع محمد أبو الغرانيق على الموضوع:

توضيحا لطريقته الفعالة بعد تجربتها. عندما تريد ظهور صورة من الفيديو بالرئيسية وبدون استخدام اكواد جافا سكريبت وغيرها يجب عليك عند انشاء موضوع جديد وضع كود الفيديو بهذه الطريقة

<iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube.com/embed/caTkcpPmq_s" width="100%"></iframe>

بشرط تغيير الكود المظلل السابق بالكود الذى تم تحديده بالصورة التاليه ويمكنك الحصول عليه عندما تضغط على نشر share للفيديو من اليوتيوب لتحصل على كود نشره داخل مدونتك أو موقعك