قم بجعل مقاطع فيديو اليوتيوب متجاوبة تلقائيًا في مدونة بلوجر بسهولة 2025

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

قم بجعل مقاطع فيديو اليوتيوب متجاوبة تلقائيًا في مدونة بلوجر بسهولة 2025

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

أهمية جعل مقاطع الفيديو متجاوبة

عند إضافة مقاطع فيديو من اليوتيوب إلى موقعك، قد يظهر الفيديو بأبعاد ثابتة تؤدي إلى قصّه على الشاشات الصغيرة أو ظهوره بمساحة غير متناسبة. لجعل التجربة أفضل للمستخدمين، من المهم أن تكون الفيديوهات قابلة للتكيف مع جميع الأجهزة، بما في ذلك الهواتف الذكية والأجهزة اللوحية.

إضافة أكواد CSS للتحكم في حجم الفيديو

يمكن استخدام أكواد CSS لتحديد نسبة أبعاد الفيديو بحيث يتم تغيير حجمه تلقائيًا وفقًا لعرض الشاشة. ستحتاج إلى إضافة بعض التنسيقات إلى قالب مدونتك لضمان أن الفيديوهات ستظهر بحجم مناسب.

قم بوضع هذا الكوود فوق  ]]></b:skin>  بالضبط:

.wraptube {
  position: relative;
  padding-bottom: 56.25%;
  margin: 10px 0;
}
.wraptube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
        

استخدام JavaScript لتعديل إطارات الفيديو تلقائيًا

لضمان أن جميع مقاطع فيديو اليوتيوب المدرجة في مقالات مدونتك تتكيف تلقائيًا مع حجم الشاشة، يمكن استخدام كود JavaScript يقوم بلفّ الإطارات الخاصة بمقاطع الفيديو داخل عنصر يحتوي على التنسيقات المطلوبة.

قم بوضع هذا الكود فوق  </body>  بالضبط:

<script>
/*<![CDATA[*/
$("iframe").each(function() {
    var a = $(this);
    a.attr("src").match("youtube.com/") && a.wrap("<div class='wraptube'></div>")
});
/* ]]> */
</script>
        

كيفية تطبيق الخطوات في مدونة بلوجر

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

قد يهمك: أفضل سلايد شو متجاوب ومتوافق مع جميع المدونات 2025

الكود الاول:

السيناريو التالي مناسب للمدونات التي لا تدعم  JQuery  . لا تقم باستخدامه إلا في حال عدم عمل السيناريو الأول.

<script>
/*<![CDATA[*/
! function() {
    var e = document.querySelectorAll("iframe");
    for (let t = 0; t < e.length; t++)
        if (e[t].getAttribute("src").match("youtube.com/")) {
            var r = document.createElement("div");
            r.className = "wraptube";
            var a = e[t].cloneNode(!0);
            r.appendChild(a), e[t].insertAdjacentElement("beforebegin", r), e[t].remove()
        }
}();
/* ]]> */
</script>
        

ملاحظة: لا تضع الاكواد الأول والثاني معًا، اختر واحدًا فقط يناسب احتياجاتك.

الكود الثاني:

إذا كنت ترغب في تجنب استخدام أكواد JavaScript، يمكنك الاعتماد على أكواد HTML بدلاً من ذلك. في هذه الحالة، كلما أردت تضمين فيديو في مدونتك، قم بوضع  Iframe  الفيديو داخل  Div  بالشكل التالي:

<div class="wraptube">

قم بوضع تضمين مقطع فيديو اليوتيوب هنا

</div>
        

الخاتمة

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