كيفية استخدام أي فيديو يوتيوب كخلفية لصفحة ويب

هل تحب خلفيات الفيديو على الصفحة الرئيسية بينغ؟ يمكنك أيضا بسهولة تضمين أي فيديو يوتيوب كخلفية لصفحة الخاصة بك بستخدام سطر من الكود البرمجية أدناه.


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

الصفحة الرئيسية Bing يستخدم في كثير من الأحيان خلفيات الفيديو، و الآن يمكن لكم استخدام هذه الحيلة على موقع الويب الخاص بك.

يوجد العديد من الطرق هنا:

  • بينغ يستخدم معيار HTML5 ا<video > لخدمة الفيديو على الصفحة الرئيسية. الفيديو مضمن لديه حجم ثابت وأنه لا يتغيير حجمه مع المتصفح.
  • هناك الإضافات jQuery  جاهزة للاستخدام ، Tubular و  BigVideo.js  على سبيل المثال، التي تتيح لك بسهولة استخدام أي فيديو، أو سلسلة من أشرطة الفيديو، لخلفيات الصفحة ويب .
  • أما النهج الآخر أكثر بساطة، وكما ترون في هذا العرض التجريبي، ويستخدم  HTML  و CSS  (أي جافا سكريبت) لمساعدتك على وضع أي فيديو يوتيوب في الصفحة الخلفية.
كيفية الستخدام

للبدء، ببساطة لصق الشفرة ادناه قرب العلامة فتح  <body> في قالب الويب الخاص بك. يجب عليك أيضا استبدال ID مع ID الفيديو الفعلي للفيديو يوتيوب التي ترغب في استخدامه في الخلفية.

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>

// Replace ID with the actual ID of your YouTube video

داخليا، نحن نستخدم يوتيوب IFRAME به لتضمين هذا الفيديو من النوع الذي يحتل صفحة كاملة (يتم تعيين كل من العرض والارتفاع إلى 100٪). أيضا، يتم تعيين Z-index إلى سلبي وبالتالي فإن طبقة الفيديو يوتيوب سيظهر عدة مستويات أقل من المحتوى الرئيسي للصفحة الخاصة بك.

الجانب السلبي هو أن الفيديو الخلفية لن يعمل على أجهزة الجوال، وليس من الممكن كتم صوت الفيديو دون استخدام جافا سكريبت.


إرسال تعليق

أحدث أقدم