Lite YouTube Embeds – طريقة أفضل لتضمين مقاطع فيديو YouTube على موقع الويب الخاص بك

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

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

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

تضمين مقاطع فيديو YouTube دون زيادة حجم الصفحة

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

يبلغ حجم الصورة المصغرة لمقاطع فيديو YouTube حوالي 15 كيلو بايت، لذا يمكننا بسهولة تقليل الحجم الأولي لصفحات الويب بمقدار 900 كيلو بايت تقريبًا.

لايت يوتيوب تضمين التجريبي

افتح هذه الصفحة التجريبية لعرض تقنية +Google أثناء العمل. هناك مقطعي فيديو مماثلين على تلك الصفحة. تم تضمين الفيديو الأول باستخدام رمز IFRAME الافتراضي الذي يوفره YouTube بينما يستخدم الفيديو الثاني الوضع البسيط الذي يقوم بتحميل فيديو YouTube عند الطلب.

عندما ينقر المستخدم على زر تشغيل الفيديو الثاني، يتم استبدال الصورة المصغرة بمشغل فيديو YouTube القياسي مع ضبط التشغيل التلقائي على 1 بحيث يتم تشغيل الفيديو على الفور تقريبًا. الميزة الكبرى هي أنه يتم تحميل JavaScript الإضافي على YouTube فقط عندما يقرر شخص ما مشاهدة الفيديو المضمن وليس غير ذلك.

تضمينات YouTube خفيفة وسريعة الاستجابة

يستخدم كود التضمين القياسي لموقع YouTube علامة IFRAME حيث يتم إصلاح عرض وارتفاع مشغل الفيديو مما يجعل المشغل غير مستجيب.

يعد رمز التضمين الجديد عند الطلب لموقع YouTube سريع الاستجابة حيث يقوم بضبط أبعاد المشغل تلقائيًا بناءً على حجم شاشة الزائر.

تضمين مقاطع فيديو YouTube بشكل مستجيب – البرنامج التعليمي

الخطوة 1: انسخ مقتطف HTML التالي والصقه في أي مكان في صفحة الويب الخاصة بك حيث تريد أن يظهر فيديو YouTube. تذكر أن تحل محل VIDEO_ID بالمعرف الفعلي لمقطع فيديو YouTube الخاص بك.

<div class="youtube-player" data-id="VIDEO_ID"></div>

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

الخطوة 2: انسخ وألصق JavaScript في أي مكان في قالب الويب الخاص بك. يعثر البرنامج النصي على جميع مقاطع الفيديو المضمنة في صفحة ويب ثم يستبدل عناصر DIV بالصور المصغرة للفيديو وزر التشغيل (انظر العرض التوضيحي).

<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.querySelectorAll('.youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

الخطوة 3: انسخ ملف CSS والصقه قبل علامة الإغلاق لقالب الويب الخاص بك.

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 48px;
    width: 68px;
    left: 50%;
    top: 50%;
    margin-left: -34px;
    margin-top: -24px;
    position: absolute;
    background: url('https://i.ibb.co/j3jcJKv/yt.png') no-repeat;
    cursor: pointer;
  }
</style>

يمكنك مشاهدة تقنية التضمين الخفيفة على YouTube أثناء العمل على صفحة Codepen هذه.

يرجى ملاحظة أن متصفحي Chrome وSafari على iPhone وAndroid يسمحان فقط بتشغيل فيديو HTML5 عندما يبدأ بتفاعل المستخدم. إنها تمنع الوسائط المضمنة من التشغيل التلقائي لمنع التنزيلات غير المرغوب فيها عبر الشبكات الخلوية.

المزيد من دروس التضمين على YouTube

1. تضمين مقطع فيديو على YouTube مع كتم الصوت
2. ضع فيديو YouTube كخلفية لصفحة الويب الخاصة بك
3. تضمين جزء من أي فيديو على اليوتيوب