الحل تأجيل فيديو اليوتيوب في المدونة
سلام الله عليكم جميعا في هدا الدرس سنشرح لكم طريقة جعل الفيديو اليوتيوب في وضع التحميل البطيئ على المدونة هده الطريقة ستساعدك في زيادة سرعة الموقع الأمر هنا عندما تقوم بالدخول إلى موقعك ستشاهد أن فيديو اليوتيوب يطهر على شكل صورة مجمدة عندما تقوم بالضغط على تشغيل سترى بأن الفيديو يطهر من جديد وهكدا في جميع الصفحات على المدونة وعندما تقيس سرعة الموقع ستختفي كلمة ليزي لود لليوتيوب.
ماهوا الخظأ الإفتراضي
يعمل إطار you tube الإفتراضي على iframe الدي قمنا بتضمينه في موقعنا على الويب على إبضاء سرعة التحميل في الموقع عن طريق تحميل الكثير من الموارد في الواجهة الأمامية الذي يتضمن مقاطع الفيديو iframe يمكن أن يستغرق you tube حوالي 500-700 كيلو بايت مما يساهم بحوالي 50-60 بالمائة من إجمالي حجم الصفحة لذا ما مدى صعوبة تحميل جافا سكربث، يمثل عقبة في css تحسين الصور و أداء سرعة الويب كما أنه يحضر الخيط الرئيسي وعندما تتحقق من أداء الصفحة في موقع إحصاءات سرعة الموقع سترى خطأ مثل هذا يؤدي كذالك إلى حدوث أخظاء في تقرير إحصاءات سرعة الصفحة كما هوا مذكور في الأسفل.
كيف يعمل التحميل البطيئ لفيديو اليوتوب
يتم فعل ذالك إذا قمت بتضمين مقطع فيديو اليوتوب بالطريقة التقليدية مباشرة يتم تحميل الموارد المطلوبة في بذاية الصفحة سواء قام الزائر بتشغيل الفيديو أم لا بدلا من تحميل الفيديو في البداية ، يمكننا بالفعل تأجيل تحميل الفيديو من خلال تنفيد إطار التحميل you tube iframe lazylod ، لذالك عندما يقوم المستخدم بالنقر على الفيدسو سيبدأ تحميل الفيديو ، يمكننا إضافة عنصر المحول الكسول lazylod ولكن الإطار يعمل بذلا منه ، وهو في الأساس صورة بها زر التشغيل بمجرد النقر عليها يفتح الفديو اليوتيوب ، بهذه الطريقة سيقوم المتصفح بتحميل الصورة فقط أما الفيديو يعمل عندما ينقر الزائر عليه ، الأن ستشاهد الطريقة على الفيديو وتطبقها على صفحتك لتحميل الموارد وتحسين سرعة الموقع مع.lazyload فيديو اليوتوب
كيف يمكنني وضع lazylod you tube في المدونة
إتبع الخطواة التالية قم أول بذهاب إلى لوحة التحكم في بلوجر تحرير html وبحث على هذا الوسم </body> ولصق هذا الكوذ css و js أعلى وسم </body> وتحفط القالب هذه الخطوة الأول
<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>الأن إذهب إلى وضعية إنشاء صفحة جذيد ولصق هذا الكوذ الثاني في أيي مك تريد ظهور الفيديو اليوتيوب ولكن يجب تغيير كلمة ID-vidoe بالأيذي الخاص بك شاهذ في الفيذيو طريقة الحصول على أيذي الفيديو إليك الكوذ في مكان النقاط ضع وسم الأول div> و في أخر الكود في مكان النقاط ضع وسم الإغلاق <div/>
<div class="youtube-player" data-id="VIDEO_ID"></div>
شكرا تمام زبطت معي ألف شكر أخي
ردحذفرائع نجحت معي
ردحذف