اضافة التحميل الكسول لمقاطع فيديو Youtube في بلوجر

سأخبركم اليوم بكيفية تمكين التحميل الكسول لمقاطع فيديو youtube على مدونات بلوجر.

أولاً ، سنرى كيفية إضافة فيديو youtube في بلوجر ، لأن بعض الأشخاص لا يعرفون ،

كيفية تضمين فيديو يوتيوب في بلوجر

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

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

<iframe allowfullscreen=" " height="266" src="https://www.youtube.com/embed/xxxx" width="320" youtube-src-id="xxxx"></iframe>

لقد تعلمنا الآن بنجاح كيفية تضمين مقاطع فيديو youtube في مدونات بلوجر . لكن في هذه الطريقة لدينا مشكلة واحدة ، ستستغرق مشاركة المدونة المحددة وقتًا طويلاً في التحميل.

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

لذلك نحن بحاجة إلى اتباع طريقة التحميل الكسول لمقاطع فيديو Youtube، سيؤدي ذلك إلى تقليل وقت التحميل الأولي لفهرسة مقاطع فيديو youtube.

كيف يمكنني تمكين التحميل الكسول لمقاطع فيديو Youtube

قبل تنفيذ خطوات التحميل الكسول Lazy Loading ، يجب عليك اولاً نسخ القالب احتياطيًا إذا حدث خطأ ما ، يمكننا استعادته مرة أخرى.

الخطوة 1. انتقل إلى لوحة تحكم بلوجر ضمن قسم المظهر قم بتعديل html وابحث عن علامة </body> والصق رمز css التالي قبلها مباشرة.

<style>
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 0px;
}
.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%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
  cursor: pointer;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  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.getElementsByClassName("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 = "https://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>

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

<div class="youtube-player" data-id="معرف_ID"></div>

الخطوه 3. ثم أخيرًا انشر مقالتك وتحقق مرة أخرى من سرعة صفحة بواسطة تحليلات Google.

اقرأ ايضًا : كيفية اضافة التحميل الكسول للصور في بلوجر

هذا كل شيء ، أخيرًا ، تعلمنا بنجاح كيفية تمكين التحميل الكسول لمقاطع فيديو Youtube في بلوجر.