تضمين فيديو YouTube ومشكلات فهرس z

عند تضمين مقطع فيديو على YouTube باستخدام إطار iframe أسفل قائمة تنقل منسدلة متعددة المستويات، قد تواجه مشكلة المشكلات التي تظهر فيها القائمة المنسدلة خلف الفيديو في Chrome وInternet Explorer. أثناء المرور فوق عنصر التنقل الرئيسي، يجب أن تظهر القائمة المنسدلة أعلى الفيديو في جميع المتصفحات.

السؤال 1: لماذا تظهر القائمة المنسدلة خلف فيديو YouTube في Chrome وIE9؟

تتعلق هذه المشكلة بفيديو YouTube نفسه، وليس بإطار iframe. تشتمل عمليات تضمين YouTube على CSS داخلي يتجاوز إعدادات CSS الأخرى، بما في ذلك قيم z-index.

السؤال 2: لماذا يتم تعيين z-index:-999 !important; على iframe لا تزال تسبب المشكلة؟

إن CSS المسيطر في كود التضمين في YouTube له الأولوية على أي إعدادات فهرس z تطبقها على iframe.

الحل:

لإصلاح هذه المشكلة، أضف المعلمة التالية إلى عنوان URL للفيديو المضمن:

&wmode=Opaque

&wmode=Opaque

يسمح هذا الإعداد بدمج الفيديو في الخلفية، السماح للعناصر الأخرى في الصفحة بالظهور فوقها.

ملاحظات إضافية:

يمكنك أيضًا استخدام المعلمة wmode=transparent بدلاً من Opaque، على الرغم من أن هذا قد يؤدي إلى مشكلات تتعلق بالشفافية في بعض المتصفحات.

• بدلاً من ذلك، يمكنك استخدام jQuery لتعديل عنوان URL لجميع إطارات iframe على صفحتك قبل تحميلها، كما هو موضح في مقتطف الشفرة أدناه:
• $(مستند).جاهز(وظيفة (){ $('iframe').each(function(){ فار url = $(this).attr("src"); $(this).attr("src",url "?wmode=transparent"); }); });