يمكنك العثور على العديد من مواقع الويب والخدمات عبر الإنترنت التي توفر إمكانية تنزيل الصور المصغرة من YouTube. ومع ذلك سوف اشارك هذه المقالة معكم وكتابة التعليمات البرمجية لمساعدتك في إنشاء صفحة باستخدام هذه الوظيفة مباشرةً على بلوجر.
YouTube Thumbnails
تعد صفحة تنزيل YouTube Thumbnails أداة بسيطة ومريحة، وهي مصممة لمساعدة المستخدمين على استخراج الصور المصغرة وتنزيلها من مقاطع فيديو YouTube. من خلال إدخال رابط الفيديو، يمكن للمستخدمين الاختيار بين أنماط الصور المصغرة المختلفة مثل MQ Default و HQ Default و SD Default و Max Res Default.
بعد النقر فوق الزر "إنشاء صورة مصغرة"، ستعرض الأداة مباشرة الصورة المصغرة المحددة، وتوفر أيضًا إمكانية تنزيل تلك الصورة كملف JPG. تعمل هذه الأداة على تبسيط عملية الحصول على صور مصغرة من YouTube، وهي مناسبة للاستخدام في المشاريع الإبداعية أو الأبحاث أو ببساطة لمشاركة الصور المصغرة لمقاطع الفيديو المفضلة لديك.
كود إنشاء صفحة تحميل صورة مصغرة من اليوتيوب
<style>
/*<![CDATA[*/
#box-thumb{max-width:600px;margin:auto}
#youtubeLink{width:100%;height:40px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f3f3f3}
#box-thumb input[type="radio"]{display:none}
#box-thumb label{display:inline-block;padding:10px;background-color:#eee;cursor:pointer;margin:5px;border-radius:5px}
#box-thumb label:hover{background-color:#ddd}
#box-thumb input[type="radio"]:checked + label{background-color:#007BFF;color:white}
#box-thumb .btn-button{background:#33beb3;color:#fff;border:initial;padding:10px;line-height:35px;font-size:14px;border-radius:5px;width:100%;cursor:pointer}
#box-thumb #thumbnailImage{max-width:100%;margin-top:20px;text-align:center}
#box-thumb #thumbnailImage img{max-width:100%;max-height:100%;display:inline-block}
/*]]>*/
</style>
<div id='box-thumb'>
<form onsubmit="return generateThumbnail();">
<h2>تحميل الصور المصغرة من اليوتيوب</h2>
<p>الصق رابط فيديو اليوتيوب</p>
<input type="text" id="youtubeLink" placeholder="مثال: https://www.youtube.com/watch?v=Cm_6r93Spqw"/>
<input type="radio" id="mqdefault" name="thumbnailType" value="mqdefault.jpg" checked = 'true'/>
<label for="mqdefault">MQ Default</label>
<input type="radio" id="hqdefault" name="thumbnailType" value="hqdefault.jpg"/>
<label for="hqdefault">HQ Default</label>
<input type="radio" id="sddefault" name="thumbnailType" value="sddefault.jpg"/>
<label for="sddefault">SD Default</label>
<input type="radio" id="maxresdefault" name="thumbnailType" value="maxresdefault.jpg"/>
<label for="maxresdefault">Max Res Default</label>
<button class='btn-button' type="submit">إنشاء صور مصغرة</button>
<div id="thumbnailImage"></div>
</form>
<script>
//<![CDATA[
function generateThumbnail() {
var youtubeLink = document.getElementById("youtubeLink").value;
if (youtubeLink.trim() === "") {
alert("الرجاء إدخال رابط يوتيوب صالح.");
return false;
}
var videoId = extractVideoId(youtubeLink);
var thumbnailType = document.querySelector('input[name="thumbnailType"]:checked').value;
var thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${thumbnailType}`;
displayThumbnail(thumbnailUrl);
return false;
}
function extractVideoId(url) {
var videoId = url.match(/[?&]v=([^?&]+)/);
return videoId ? videoId[1] : null;
}
function displayThumbnail(url) {
var thumbnailImage = document.getElementById("thumbnailImage");
thumbnailImage.innerHTML = `<img src="${url}" alt="Ảnh Thumbnail YouTube">`;
createDownloadButton(url);
}
function createDownloadButton(imageUrl) {
var downloadButton = document.createElement("a");
downloadButton.href = imageUrl;
document.getElementById("thumbnailImage").appendChild(downloadButton);
}
//]]>
</script>
</div>
طريقة التركيب
ما عليك سوى الانتقال إلى الصفحة إنشاء صفحة جديدة ولصق كافة التعليمات البرمجية أعلاه في طريقة عرض HTML ونشرها، وبذلك تكون قد انتهيت
