الطريقة الصحيحة لإضافة فيديو يوتيوب في صفحة ويب
هل تدرك أنك تقوم بإدراج وإضافة مقاطع الفيديو يوتيوب على مدونتك بشكل خاطئ؟
مؤخرا وأثناء قيامي ببعض أعمال الصيانة الخاصة بجانب السيو خاصة تحسين سرعة تحميل مدونة فولفولي. إكتشفت أمرا وهو أن الطريقة العادية التي تعودت على اتباعها لإضافة مقاطع الفيديو من يوتيوب خاطئة وتكلف غاليا. فقمت بالبحث عن حل لهذا الإشكال من أجل تجنب عقوبات آليات البحث التي تفضل المواقع والمدونات السريعة جدا.
فبإضافة كود جافا سكريبد داخل كود القالب يتم تحسين سرعة تحميل الصفحة التي تحتوي على الفيديو دون إبطاء كما هو الشأن في الحالة العادية. وهذه هي النتيجة التي استخلصتها من التجربة بين صفحتين واحدة أدرجت فيها الفيديو بالطريقة العادية وأخرى بالطريقة المحسنة:
الطريقة العادية :
- سرعة التحميل: 2.76 ثانية
- حجم الصفحة: 1.6 ميغا بايت
- عدد طلبات التحميل: 112
الطريقة المحسنة:
- سرعة التحميل: 1.58 ثانية
- حجم الصفحة: 1.1 ميغا بايت
- عدد طلبات التحميل: 90
وبالنظر إلى الملفات الأكثر حجما وجدت أن الملف الخاص بالفيديو في الطريقة العادية يبلغ حجمه 341.4 كيلوبايت بينما لا يوجد في الطريقة المحسنة.
كل هذا يعني أنه يجب تحسين طريقة إضافة أشرطة الفيديو داخل مدونتكم، للزيادة في سرعة التحميل. وربح المزيد من الرتب في تصنيف آليات البحث. أضف لهذا أن الطريقة التي ستتعلمونها في هذا الدرس تجعل مقاطع الفيديو من يوتيوب متجاوبة، أي يمكن قراءتها على مدونتكم مباشرة دون حاجة لفتحها على يوتيوب. وإليكم طريقة القيام بذلك.
الطريقة الصحيحة لإدراج وإضافة فيديو يوتيوب على مدونات بلوجر
1 - أول خطوة هي إضافة هذا الكود داخل قالب مدونتكم. من منصة التحكم في مدونتكم قالب ثم تحرير HTML. ثم Ctrl+F من لوحة المفاتيح للبحث عن </body> . وفوق هذا الوسم مباشرة أضيفوا الكود التالي بعد تحويله باستعمال أداة تحويل أكواد HTML:
<script> (function() { var v = document.getElementsByClassName("youtube-player"); for (var n = 0; n < v.length; n++) { v[n].onclick = function () { var iframe = document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&rel="+ this.dataset.related +"&controls="+this.dataset.control+"&showinfo=" + this.dataset.info); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); iframe.setAttribute("style", "width: 100%; height: 100%; position: absolute; top: 0; left: 0;"); if (this.dataset.fullscreen == 1){ iframe.setAttribute("allowfullscreen", ""); } while (this.firstChild) { this.removeChild(this.firstChild); } this.appendChild(iframe); }; } })(); </script>
قوموا بحفظ التغييرات.
2 - سنمر الآن لإضافة الفيديو داخل الموضوع بإستعمال الكود التالي:
كل ما يجب تغييره أعلاه هو الرقم الخاص ID بالفيديو وهذه طريقة الحصول عليه. فعند مشاهدتكم لأي شريط فيديو يتم إظهار رابطه بهذا الشكل:
هذا كل ما تحتاجونه لإضافة الفيدو من يوتيوب على مدوناتكم. إذا كنتم ممن يستعملون الفيديو بكثرة فهذا سيزيد من سرعة تحميل مدونتكم وبالتالي كسب ثقة مواقع البحث.
2 - سنمر الآن لإضافة الفيديو داخل الموضوع بإستعمال الكود التالي:
<div class="youtube-player" data-id="g6q20Ud7Quk" data-related="0" data-control="1" data-info="1" data-fullscreen="1" style="width:100%;display: block; position: relative;cursor: pointer;max-height:360px;height:100%; overflow:hidden;padding-bottom:56.25%;margin:0 auto"> <img src="//i.ytimg.com/vi/g6q20Ud7Quk/hqdefault.jpg" style="bottom: -100%; display: block; left: 0; margin: auto; max-width: 100%; width: 100%;height:auto; position: absolute; right: 0; top: -100%;"> <div style="height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url('https://i.imgur.com/TxzC70f.png') no-repeat;"></div> </div>
كل ما يجب تغييره أعلاه هو الرقم الخاص ID بالفيديو وهذه طريقة الحصول عليه. فعند مشاهدتكم لأي شريط فيديو يتم إظهار رابطه بهذا الشكل:
رقم الفيديو على يوتوب |