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

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

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

إضافة كود 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>

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

5) تتوجه إلى المقال ثم تضغط على قلم الموجود اعلى يمين شريط الأدوات ثم عرض HTML.

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

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

في مكان VIDEO_ID تقوم بوضع الأيدي الخاص بالفيديو. من أين تحصل على video id؟

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

إضافة كود Lazy load Youtube لتسريع مدونة بلوجر (الطريقة الصحيحة)

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

إضافة كود Lazy load Youtube لتسريع مدونة بلوجر (الطريقة الصحيحة)

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

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

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