كيفية تضمين فيديو يوتيوب في صفحة ويب مع خاصية Lazyload و عرض متجاوب
تطوير بلوجر تطوير ويب
في مقال اليوم، سنعرف كيفية تضمين فيديو من يوتيوب بخاصية التحميل الكسول أو البطيء"Lazy Load" داخل صفحة ويب أ, مقال مدونة بشكل صحيح وبعرض متجاوب مع كل الشاشات (How to properly embed a YouTube Video with Lazyload and Responsive) بطرق وأشكال مختلفة والتي من خلال تطبيق أي منها سنتمكن من تضمين فيدوهات يوتيوب في صفحات الويب مع خاصية التحميل الكسول لضمان عدم تأثير فيديو المضمن من يوتيوب على سرعة تحميل صفحة الويب.
تعرف على كيفية تضمين فيديو من يوتيوب بشكل متجاوب داخل صفحات موقعك أو مقالات مدونتك الإلكترونية مع خاصية التحميل الكسول أو Lazy Load باستخدام جافا سكربت JavaScript.
إقرأ أيضا: شرح تركيب تعليقات Disqus مع خاصية التحميل الكسول (Lazy Loading) .
في حال لم تكن قد لاحظت ذلك بعد، وكنت تقوم فقط بتضمين أي فيديو مفيد تجده على اليوتيوب في صفحات موقعك أو مدونتك، حيث عادة تقوم بتضمين مقطع فيديو من اليوتيوب، على سبيل المثال:
<iframe width="560" height="315" src="https://www.youtube.com/embed/tyZuZRyriDg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>والذي يضيف تلقائيًا حجمًا إضافيًا لصفحة موقعك حيث يبلغ حجم سكربت يوتيوب 625.4 كيلوبايت 😱😱. هذا في حد ذاته، سيدكر كن سرعة تحميل صفحة موقعك لو علمت أن الحجم المثالي لصفحة الويب للتحميل السريع هو واحد ميغا بايت (1024 كيلو بايت). لذا إن كنت تبحث عن طريقة لتحسين سرعة تصفح صفحات الويب الخاصة بك التي تحتوي على مقاطع فيديو مضمنة من يوتيوب YouTube ، فأنت بالتأكيد بحاجة إلى إستخدام خاصية التحميل البطيء Lazyload.
{tocify} {$title=ستقرأ في هذا المقال}يمكنك الإستفادة من مقالي حول : كيفية تضمين فيديو يوتيوب Shorts على صفحات موقعك أو مواضيع مدونتك.
ولتتأكد من أهمية تركيب خاصية التجيمل البطيء أو الكسول Lazyload لفيديوهات اليوتيوب المضمنة، قمت بعمل بإنشاء صفحتي ويب بنفس المحتوى على مدونة من مدونات بلوجر، الأولى قمت بتضمين فيديو من يوتيوب مباشرة بدون التحميل الكسول Lazyload والأخرى مع التحميل الكسول وقمت باختبار سرعة كلا منهما من خلال موقع Web.dev، وكانت النتئجة كما هو ظاهر في الصور ادناه. (لا حظ الفرق 😰)
ولتتأكد بنفسك من الأمر، رابط الصفحتين في الصورة أعلاه هما كالآتي:
لذا في في هذه المقالة ، سوف نعرض لك طريقتين لحل مشكلتك، من خلال تأجيل تحميل مكتبات جافاسكربت الخاصة باليوتيوب لحين تمرير المستخدم للأسفل و ظهور الفيديو أمام المستخدم أي في مجال العرض في المتصفح Screen viewport.
إقرأ أيضا: أهمية الفيديو في تحسين موقعك لمحركات البحث وتصدر نتائج البحث .
أفضل طرق تضمين فيديو يوتيوب Youtube على صفحات الويب - LazyLoad YouTube Responsive
ملاحظة: الطريقتين أدناه ستعرض الفيديو من يوتيوب على صفحتك بشكل العرض الكامل Full width وبشكل مميز ومتجاوب مع جميع مقاسات شاشات العرض سواء الشاشات الكبيرة أو على شاشة الجوال.
إقرأ أيضا: كيفية إعداد مدونة بلوجر على نطاق فرعي (دومين فرعي) مخصص .
الطريقة الأولى: التحميل البطيء Lazyload مع IntersectionObserver API
لفهم ما سنفعله في هذه الطريقة مع IntersectionObserver API ، ضع في اعتبارك المثال التالي لصفحة ويب قابلة للتمرير رأسياً تحتوي على مقطع فيديو YouTube واحد:
في هذه الحالة ، إذا قمت بتضمين الفيديو كما تفعل عادةً من خلال ادراج كود التضمين المقدم من يوتيوب، فإن كود iframe من يوتيوب YouTube سيضيف على الفور 625.4 كيلوبايت إلى حجم صفحتك، على الرغم من أن الفيديو غير مرئي للمستخدم في منفذ العرض أو لم يظهر بعد في مجال الرؤية للمتصفح. وهذا سيسبب مشكلة كارثية على تحسين سرعة تحميل صفحة موقعك، وهذا أمر مروع حقًا. لذا فإن الحل لإزالة 625.4 كيلوبايت الغير المطلوبة بعد، سيكون من خلال تأجيل تحميلها إلى حين أن تصبح مرئية في منفذ العرض (فباستخدام التحميل البطيء LazyLoad لن يتم تحميل جافاسكربت اليوتيوب على الفور):
سيتم تحميلها فقط عندما تكون حاوية أو إطار الفيديو ضمن إطار العرض في شاشة المتصفح، وسيتم تحميل 625.4 كيلوبايت لاظهار فيديو اليوتيوب للمستخدم الآن:
والآن، دعوني أشرح لكم كيفية تحميل مقطع فيديو YouTube مضمن على النحو الأمثل باستخدام التحميل البطيء أو التحميل الكسول Lazyload باستخدام جافاسكربت JavaScript.
لتطبيق هذه الطريقة لعرض فيديو اليوتيوب، قم بتنفيذ الخطوتين أدناه ..
خطوات تنفيذ وتطبيق الطريقة الأولى هي كالتالي .. 👇
1. تنصيب مكتبة جافاسكربت VanillaLazyLoad
من أجل تطبيق الطريقة الأولى وتفعيل خاصية التحميل البطيء أو التحميل الكسول LazyLoading، سنستخدم مكتبة الجافاسكربت LazyLoad vanilla. والتي هي عبارة عن كود جافاسكربت جاهز وخفيف وصغير الحجم (2.4 كيلو بايت) ومرن وشامل، أي أنها ستعمل على تسريع موقع الويب الخاص بك أو مدونتك بالكامل من خلال تأجيل تحميل الصور ومقاطع الفيديو وإطارات iframes لحين ظهورها ضمن إطار العرض للمستخدم. المكتبة مكتوبة بلغة جافا سكريبت "Vanilla"، والتي تعتمد على واجهة برمجة تطبيقات IntersectionObserver، وتدعم عرض الصور المتجاوبة، كما أنها تحسّن من سرعة تحميل مدونتك أو موقع الويب الخاص بك لمستخدمي الإنترنت البطيء، ويمكنها أيضا تمكين التحميل البطيء lazyload الأصلي.
إذا كنت تستخدم NPM للتعامل مع الحُزَم، فقم بتنفيذ الأمر التالي:
npm install vanilla-lazyload
أما إذا كان موقعك يعمل على ووردبرس أو مدونات بلوجر أو أي منصة إدارة محتوى
أخرى، فيمكنك تنصيب Vanilla LazyLoad من خلال نسخ ولصق الكود التالي فوق
علامة إغلاق الهيدر </head> في موقعك:
<script
async
src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@latest/dist/lazyload.min.js"
></script>حجم مكتبة Vanilla Lazyload هو 7.34 كيلو بايت فقط، لذلك فهي بالتأكيد خيار رائع لمواقعك أو مدونتك مقارنة بالـ 625.4 كيلوبايت التي قد يضيفها فيديو واحد من يوتيوب. لمزيد من المعلومات حول هذه المكتبة، يرجى زيارة المستودع الرسمي للمكتبة على Github.
2. تعديل كود تضمين الفيديو من يوتيوب بإضافة class="lazy"
الآن كل ما نحتاج إلى القيام به هو نسخ كود تضمين الفيديو الذي نريده
من يوتيوب، مع إضافة
class="lazy" إلى علامة الفريم <iframe>
وتغيير السمة src إلى data-src حتى لا يتم تحميل
الإطار تلقائيًا. أيضا قم بتضمين سكربت JavaScript لتهيئة التحميل البطيء بشكل
عام كما هو موضح بالكود التالي:
<!-- Embedded YouTube video Markup with the lazy class -->
<iframe
class="lazy"
data-src="https://www.youtube.com/embed/tyZuZRyriDg"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
<script>
// Set the options globally
// to make LazyLoad self-initialize
window.lazyLoadOptions = {
// Your custom settings go here
};
// Listen to the initialization event
// and get the instance of LazyLoad
window.addEventListener("LazyLoad::Initialized", function (event) {
window.lazyLoadInstance = event.detail.instance;
}, false);
</script>باستخدام هذه الطريقة، سيتم عرض وتحميل فيديو يوتيوب YouTube فقط عندما يظهر ضمن إطار العرض في شاشة المستخدم، أي عندما يقوم المستخدم بالتمرير للاسفل حتى يصل للمنطقة التي يوجد بها الفيديو على صفحة الويب.
إلى هنا نكون قد انتهينا من تطبيق الطريقة الأولى، وأصبح بإمكاننا إدراج
فيديوهات اليوتيوب على موقعنا أو مدونتنا مع خاصية التحميل البطيء من خلال
تعديل فقط كود التضمين لفيديو يوتيوب
بإضافة class="lazy" إلى علامة
الفريك <iframe> وتغيير
السمة src إلى data-src كما
وضحنا في الخطوة الثانية أعلاه.
إقرأ أيضا: أفضل المواقع لتنزيل الفيديوهات من فيس بوك أونلاين .
ولكن في حالة كنت تود أو يكون ظهور الإطار بنفس عرض صفحة الويب أو موقعك ويكون متجاوب على جميع شاشات العرض كشاشة الجوال فقم تنفيذ الخطوة الثالثة .. وهي كالتالي:
3. تمكين العرض المتجاوب لفريم فيديو يوتيوب المضمن
أولا، قم بإضافة كود CSS التالي لكود الإستايل الخاص بموقعك، أي قبل
علامة الإغلاق </style> :
.youtube-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 5px;
}
ثانيا، الآن قم بتضمين كود فيديو اليوتيوب المُعدّل (كما هو موضح في
الخطوة الثانية أعلاه) داخل الوسم <div class="youtube-responsive"></div>
، ليصبح كود التضمين النهائي كالتالي:
<div class="youtube-responsive">
<iframe
class="lazy"
data-src="https://www.youtube.com/embed/tyZuZRyriDg"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
<script>
window.lazyLoadOptions = {
};
window.addEventListener("LazyLoad::Initialized", function (event) {
window.lazyLoadInstance = event.detail.instance;
}, false);
</script>
</div>يمكنك رؤية مثال حي للطريقة الأولى و لتطبيق الخطوات الثلاث أعلاه على موقع Codepen، والمثال يتضمن كود التضمين HTML و كود CSS والجافا سكربت (اضغط هنا للانتقال لصفحة التطبيق للطريقة الأولى على موقع Codepen)
الطريقة الثانية: التحميل البطيء مع خيار التشغيل اليدوي
مع هذه الطريقة الثانية، يعتبر تضمين فيديو يوتيوب مع ترك خيار تحميل الفيديو ومشاهدته للمستخدم أو المتصفح لموقعك أمرا رائعًا لأولئك الذين لا يمكنهم الاعتماد على الطريقة الأولى LazyLoading من خلال IntersectionObserver. والذي قد يكون بسبب أنهم يحتاجون لتضمين فيديوهات من اليوتيوب في بداية صفحة الويب أي في أعلى الصفحة (وهو أول جزء يظهر من الصفحة للمستحدم)، وفي هذه الحالة، سيظهر فيديو اليوتيوب المضمن مباشرة ضمن أول جزء من إطار العرض لشاشة المستخدم أو الزائر عند دخوله لصفحة الويب الخاصة بك وهو ماسيعطّل التحميل البطيء وسيعمل على تحميل الفيديو مباشرة وسيتسبب في زيادة حجم صفحة الويب، والذي في هذه الحالة، لن تُفيد الطريقة الأولى أعلاه. لذلك ستحتاج إلى تنفيذ الطريقة الثانية هذه. والتي تعتبر في هذه الحالة هي الخيار الأمثل لك ولموقعك.
ففي هذه الطريقة، سيتم عرض الصورة المصغرة للفيديو الذي تريد تضمينه بدلا من الفيديو، أي سوف يُعرض الفيديو المضمن كصورة مع زرّ التشغيل في الوسط، وعند رغبة المستخدم تشغيل الفيديو، فسيقوم المستخدم ببساطة بالنقر فوق الصورة وحينها سيتم تحميل فيديو اليوتيوب YouTube مباشرة وسيتم تشغيله على الفور على نفس الصفحة.
قد تكون عملية تنفيذ هذه الطريقة أطول وأصعب قليلا للمبتدئين، ومع ذلك، فتنفيذها وفائدتها تستحق ذلك، مقارنةً بـ 625.4 كيلوبايت التي ستتحمّلها صفحة موقعك من الفيديو المضمن في حال لم تقم بتطبيق أي من الطريقتين، فمن خلال هذه الطريقة، يمكنك فقط إضافة حجم الصورة المصغرة (التي قد تبلغ حوالي 15 كيلوبايت فقط). لذا دعونا نبدأ بشرح هذه الطريقة!
خطوات تنفيذ وتطبيق الطريقة الثانية هي كالتالي .. 👇
1. إنشاء كود تضمين الفيديو من اليوتيوب
في هذه الطريقة، سيكون كود التضمين الخاص بإدراج الفيديو داخل صفحات موقعك مختلفًا تمامًا عما اعتدت عليه عند تضمين فيديو من اليوتيوب YouTube.
حيث ستحتاج إلى معرفة معرّف الفيديو أو الـ id والذي يظهر بالعادة في نهاية رابط الفيديو على اليوتيوب.
على سبيل المثال، إذا كان كود التضمين iframe لفيديو يوتيوب هو التالي:
<iframe width="560" height="315" src="https://www.youtube.com/embed/tyZuZRyriDg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
فإن معرّف الفيديو أو الـ id الخاص بالفيديو سيكون هو الجزء المُظلّل في الكود
أعلاه، وهو
tyZuZRyriDg.
الآن وبعد معرفة الـ id الخاص بالفيديو المراد عرضه وتضمينه في صفحة الويب، فإن كود التضمين سيصبح كالتالي:
<!-- 1. حاوية فيديو اليوتيوب -->
<div class="embed-youtube" data-video-id="4XxGS7aqRtg">
<!-- 2. الأيقونة التي ستظهر كأيقونة التسغيل -->
<div class="embed-youtube-play"></div>
</div>كما ترى، سيتم إدراج المعرّف أو الـ id الخاص بالفيديو في سمة data-video-id في كود التضمين، والذي سوف نستدعيه من خلال كود جافاسكربت JavaScript (الموضح في الخطوة الثالثة) والذي سيعمل على جلب وتضمين الفيديو من يوتيوب YouTube.
2. إضافة أكواد CSS
الآن، دعونا نضيف بعض أكواد CSS لتحسين مظهر فريم المعاينة الخاص بالفيديو، ليظهر داخل صفحة موقعنا أو مدونتنا بشكل جميل وجذاب لحثّ المستخدم أو المتصفح على النقر عليه لتشغيل ومشاهدة الفيديو المضمن من يوتيوب YouTube:
.embed-youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.embed-youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
width: 68px;
height: 48px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.embed-youtube .embed-youtube-play:hover {
background-color: #f00;
}كود الـ CSS أعلاه، سيعمل على الحفاظ على نسبة عرض إلى ارتفاع تبلغ 16: 9، وهي النسبة المحددة التي يظهر بها كل مقطع فيديو من اليوتيوب YouTube وكما سوف يعرض أيقونة تشغيل وسط الصورة المصغرة لتوضح للمستخدم أن هذا مقطع فيديو يمكن تشغيله وليست صورة ثابتة حتى يتمكن المستخدم من التفاعل معه.
3. إضافة كود الجافاسكربت JavaScript
الآن وكخطوة أخيرة، سوف نضيف كود الجافاسكربت JavaScript والذي من خلاله سنستدعي الصورة المصغرة للفيديو تلقائيًا. كما سيعمل أيضا على إضافة أيضًا مستمع حدث النقر (click event listener) الذي سيعمل على إستدغاء وتضمين فريم فيديو اليوتيوب YouTube مباشرة عندما يضغط المستخدم أو التصفح على الصورة أو زر التشغيل لتشغيل الفيديو على نفس الصفحة.
يتم إدراج كود الجافاسكربت التالي داخل كود الموقع أو المدونة، قبل علامة الإغلاق
</body> :
(function(){
let YouTubeContainers = document.querySelectorAll(".embed-youtube");
// Iterate over every YouTube container you may have
for (let i = 0; i < YouTubeContainers.length; i++) {
let container = YouTubeContainers[i];
let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg";
// Load the Thumbnail Image asynchronously
let image = new Image();
image.src = imageSource;
image.addEventListener("load", function() {
container.appendChild(image);
});
// When the user clicks on the container, load the embedded YouTube video
container.addEventListener("click", function() {
let iframe = document.createElement( "iframe" );
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
// Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it
iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");
// Clear Thumbnail and load the YouTube iframe
this.innerHTML = "";
this.appendChild( iframe );
});
}
})();يمكنك رؤية مثال حي وكامل لتطبيق الخطوات الثلاث أعلاه للطريقة الثانية على موقع Codepen في الفريم التالي، والذي يتضمن كود التضمين HTML و كود CSS والجافا سكربت :
See the Pen Embedding a Youtube video with lazyload and responsive (الطريقة الثانية) by md3bm (@md3bm) on CodePen.
كما تلاحظ في المثال أعلاه، يمكننا تضمين عدة مقاطع فيديو من اليوتيوب بأي من الطريقتين أعلاه داخل صفحة واحدة في موقع ويب أو المدونة دون أن تتأثر سرعة تصفح الموقع أو المدونة ولن يزيد من حجم تحميل الصفحة إطلاقا.
إقرأ أيضا: أفضل مواقع بيع وشراء السيارات المستعملة في الوطن العربي .
تطبيق الطريقة الثانية بأسلوب آخر وبكود واحد فقط
هنالك خيار آخر لتطبيق الطريقة الثانية بسهولة تامة ومن خلال كود واحد فقط لتضمين فيديو من اليوتيوب من خلال عرض الصورة المصغرة للفيديو والتي ستظهر بعرض كامل Full width وبشكل متجاوب مع جميع مقاسات الشاشات Responsive وترك خيار اظهار الفيديو للمستخدم، فإذا كان يرغب بمشاهدة الفيديو، كل ما عليه هو الضغط على الصورة وسيتم تحميل وتشغيل الفيديو مباشرة.
الكود هو كالتالي:
<div class="youtube-responsive">
<iframe
src="https://www.youtube.com/embed/tyZuZRyriDg&autoplay=1"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}
</style><a href=https://www.youtube.com/embed/tyZuZRyriDg?autoplay=1><img src=https://img.youtube.com/vi/tyZuZRyriDg/maxresdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▷</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe></div>
<style>.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:1em auto}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:5px}
</style>أدناه، مثال لعرض فيديو من يوتيوب من خلال عرض صورة للفيديو مع ترك خيار تشغيل وتحميل الفيديو للمستخدم من خلال كود واحد فقط.
قم بتعديل الآي دي في الثلاثة مواضع في الكود أعلاه، بالـ id الخاص بفيديو اليوتيوب المُراد عرضه. كذلك قم بتغيير النص البديل وعنوان صورة الفيديو بالنص الذي تريده.
إقرأ أيضا: كيفية إنشاء مستودع ملفات على GitHub واستخدامه لاستضافة ملفات موقعك .
الخلاصة
آمل أن يساعدك هذا المقال في فهم أهمية تفعيل خاصية التحميل البطيء أو التحميل الكسول Lazyload بشكل عام ومعرفة كيفية تضمين فيديو من يوتيوب مع خاصية Lazyload و عرض متجاوب داخل صفحات موقعك أو مدونتك سواء على ووردبرس أو بلوجر. في الواقع ، يمكنك استخدام هذه التقنية أو الخاصية على أي موقع ويب آخر.
ختاما، إذا كان لديك أي سؤال أو إستفسار أو تعليق حول الموضوع، فسأسعد بمشاركتك إياه في التعليقات أدناه لنتناقش حول الأمر ولمساعدتك لحل أي مشكلة قد تواجهك عند تطبيق شروحات محتوى المقال.
