كود Lazy load Youtube لتسريع مدونة بلوجر

  إذا كنت تضيف فيديوهات اليوتيوب بالطريقة العادية من خلال نسخ كود التضمين ولصقه في فأنت تدم ضرورية. لأن سرعة تحميل الصفحة في المدونة ستنخفض كثيرا. ماذا لو خبرتك توجد طريقة لإضافة الكثير من الفيديديوهات المضمنة على المقال في بلوجر دون أن تتثر سرعة مدو كيف ذلك؟ Lazy load Youtube على المدونة .  

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

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

شرح اضافة كود Lazy load Youtube على Blogger

1) تحكم بلوجر ثم تختار المظهر

2) HTML

3) تبحث عن كود  <body/> 

4) فوقه مباشرة على بلصق الكود التالي:

<التصميم>

    <style>
  .youtube-player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin:0}.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:.4s all;-moz-transition:.4s all;transition:.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(e){var t=document.createElement("iframe");t.setAttribute("src","https://www.youtube.com/embed/"+e.dataset.id+"?autoplay=1&rel=0"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","1"),t.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),e.parentNode.replaceChild(t,e)}function initYouTubeVideos(){for(var e=document.getElementsByClassName("youtube-player"),t=0;t<e.length;t++){var a=e[t].dataset.id,i=document.createElement("div");i.setAttribute("data-id",a);var r=document.createElement("img");r.src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp".replace("ID",a),i.appendChild(r);r=document.createElement("div");r.setAttribute("class","play"),i.appendChild(r),i.onclick=function(){labnolIframe(this)},e[t].appendChild(i)}}document.addEventListener("DOMContentLoaded",initYouTubeVideos);
//]]>
</script>

الآن انتهينا من الخطوات الأساسية. والخطوة التانية تعيدها في كل مرة تريد وضع فيديو يوتيوب علاى المدونة وه:

لغة البرمجة

6) تقوم بلصق الكود التالي:

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

في مكان VIDEO_ID تقوم بوضع الأيدي الخاص بالفيديو. من أين تحصل على video id ؟ عندما تضغط على مشاركة للفيديو ثم تضغط على تضمين سوف يظهر لك الكود الخاص بالفيديو كاملا. الأيدي هو ما يظهر بعد دومين يوتيوب. كما هو موضح في الصورة التالية:

أيضا الأيدي id الخاص بالفيديو يوجد في نهاية رابط video بعد علامة تساوي = كما هو موضح في الصورة أسفله:

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

Share on Google Plus

About black

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.