تأجيل تحميل فيديوهات اليوتيوب عبر التحميل الكسول داخل مدونة بلوجر

محسن حميان
1
Lazy Load Youtube Vides

تقوم مقاطع "فيديو YouTube" المضمنة في صفحة ويب بتحميل مجموعة من JavaScript وراء الكواليس، وهذا ما يؤثر على سرعة تحميل الصفحة حيث يتم تحميل مجموعة من الأكواد الغير الضرورية التي من الممكن عدم إستعمالها من طرف المستخدم.

ولتفادي تحميل هذه الأكواد نقوم بتضمين "فيديوهات اليوتيوب" بإستعمال خاصية "التحميل الكسول"، والتي تقوم بتأجيل تحميل "فيديو اليوتيوب" إلى أن ينقر المستخدم على زر التشغيل فوق الصورة المصغرة للفديو.

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

مميزات التحميل الكسول لفيديوهات اليوتيوب

يدعم التحميل الكسول الذي سنشرحه مجموعة من الميزات المهمة والتي تتمثل في:

  • الحفاظ على سرعة الصفحة من خلال عدم تحميل الفيديو إلا بعد الضغط على زر التشغيل.
  • التحميل الكسول لصورة الفيديو بعد ظهور الفيديو في واجهة المستخدم.
  • زر التشغيل يلمع لإثارة إنتباه المستخدم.
  • تحميل الفيديو بعد الضغط على زر التشغيل (لا يشتغل الفيديو مباشرة).
  • يعرض الفيديو بشكل متجاوب حسب aspect ratio 16:9.
  • لكي يشتغل الفيديوا من الضغطة الأولى قم بوضع autoplay = true في الجافا سكريبت.

إضافة التحميل الكسول لفيديوهات اليوتيوب على مدونة بلوجر

من السهل إضافة Lazy Load Youtube Videos على مدونة فأنت تحتاج فقط إلى تركيب أكواد CSS و JavaScript داخل قالب بلوجر مرة واحدة ثم تستعمل كود HTML داخل المواضيع كلما أردت إضافة فيديو يوتيوب جديد.

ليس بضروري إستعمال هذه الآداة على مدونة بلوجر فقط فهي صالحة لجميع أنواع المواقع لكن أنا الآن سأشرح كيفية تركيبها على منصة بلوجر.

أكواد CSS لإضافة التحميل الكسول ليوتيوب

يفضل إضافة هذه الأكواد فوق </b:skin>.

.LZ-tube,.LZ-tube iframe{display:block}
.LZ-tube .LZ-playbtn,.LZ-tube .LZ-thumb,.LZ-tube iframe{position:absolute;top:0;right:0;width:100%;height:100%}
@font-face{font-family:LZ-awesome;src:url('https://cdn.jsdelivr.net/gh/hamianemohssine/7amian@master/font-icons/zttube-plside.woff2')}
.LZ-tube{position:relative;width:100%;height:auto;padding-top:56.25%;background-color:#111111dd;box-shadow:0 0 3px #aaa;border-radius:3px;overflow:hidden;margin-bottom:10px}
.LZ-tube .LZ-thumb{display:block;background-size:cover;background-repeat:no-repeat;background-position:center}
.LZ-tube .LZ-playbtn{display:flex;justify-content:center;align-items:center;cursor:pointer}
.LZ-tube .LZ-playbtn::after{content:"\e800";font-family:LZ-awesome;color:#fff;font-size:70px;transition:.3s;animation:1s linear infinite forpb}
.LZ-tube .LZ-playbtn:hover::after{transform:scale(1.2)}
@keyframes forpb{0%,100%{text-shadow:0 0 10px #000}50%{text-shadow:0 0 10px #fff}}

نظرا لأن الإضافة تعرض فيديوهات اليوتيوب متجاوبة فأهم شيء يجب شرحه في أكواد CSS هو إمكانية تغيير Aspect ratio المسؤول على نسبة العرض إلى الإرتفاع بالنسبة للفيديوهات، ولأن أكثر نسبة عرض إلى الإرتفاع شهرة هي 16:9 قمت بإضافة القيمة 56.25%  في أكواد CSS وهي خارج العملية 9/16*100 لهذا فيمكنك التحكم في أبعاد الفيديو من خلال padding-top في CSS.

أكواد JavaScript إضافة Lazy Load لفيديوهات اليوتيوب

يفضل وضع هذه الأكواد فوق</body> .

<script type='text/javascript'>
/*<![CDATA[*/
document.querySelectorAll(".lazy-tube").forEach(function(e) {
  	let autoplay = false;
    let t = ["maxres", "sd", "hq", ""],
        n = [".youtube.com", "innerHTML", "querySelector"],
        r = e.dataset.vcode,
        l = document.createElement("div");

    function a() {
        let e = l.getBoundingClientRect();
        e.top < window.innerHeight && e.bottom > 0 && (! function e(r, l) {
            let a = t.shift(),
                o = "https://img" + n[0] + "/vi" + ("hq" == a ? "" : "_webp") + "/" + l + "/" + a + "default." + ("hq" == a ? "jpg" : "webp"),
                c = new Image;
            c.onload = function() {function n() {r.style.backgroundImage = "url('" + c.src + "')"}c.width > 120 ? n() : t.length ? e(r, l) : n()}, c.onerror = function() {t.length && e(r, l)}, c.src = o
        }(l[n[2]](".LZ-thumb"), r), window.removeEventListener("scroll", a))
    }
    l.className = "LZ-tube", l[n[1]] = "<span class='LZ-thumb'></span><span class='LZ-playbtn'></span>", e.parentNode.replaceChild(l, e), window.addEventListener("scroll", a), a(), l[n[2]](".LZ-playbtn").onclick = function() {l[n[1]] = '<iframe src="https://www' + n[0] + "/embed/" + r + (autoplay ? "?autoplay=1" : "") + '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'}
});
/*]]>*/
</script>

في حالة كنت تريد أن يتم تشغيل الفيديو مباشرة بعد الضغط على زر التشغيل قم بتغيير قيمة autoplay الى true في أكواد الجافا سكريبت، أما في حالة تركتها false فسيتم الضغط على زر التشغيل ثم بعد تحميل الفيديوا يجب الضغط ثانية على زر التشغيل الأصلي لليوتيوب.

أكواد HTML التابعة لتأخير تحميل فيديو اليوتيوب.

توضع أكواد HTML داخل مقال بلوجر مع تغيير قيمة data-vcode إلى معرف فيديو اليوتيوب التي تريد أن يتم تضمينه داخل المقال.

<div class="lazy-tube" data-vcode="video_id"></div>

قد يتسأل البعض من أين نأتي بمعرف فيديو اليوتيوب الأمر بسيط هو عبارة عن أحرف قصيرة توجد في رابط أي فيديوا يوتيوب.

https://www.youtube.com/watch?v=N7apmx3-9Fo
<!-- نوع آخر -->
https://www.youtube.com/watch?v=gUQJSq37Uck&t=10s

انتهى شرح كيفية تركيب التحميل الكسول لفيديوهات اليوتيوب داخل مواضيع مدونة بلوجر كنتم مع محسن حميان على مدونة حميان للمعلوميات

Tags

1 تعليقات

أحدث أقدم