كيفية إضافة الفيديو كخلفية ملء الشاشة في WordPress

تعد مقاطع الفيديو رائعة ، فهي توفر وسائط أكثر جذبًا وتلتقط مشاعر أكثر من الصورة.

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

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

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

البرنامج المساعد لإضافة فيديو كخلفية ملء الشاشة في WordPress

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

1. mb .YTPlayer لمقاطع الفيديو الخلفية

أحد مكونات الفيديو الإضافية الشائعة لتكامل الخلفية. يدمج المكون الإضافي مشغلًا مخصصًا داخل عنصر الصفحة.

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

لا يدعم المكون الإضافي التنسيق سريع الاستجابة تمامًا.

التفاصيل الكاملة والتحميل | تجريبي

2. بطل المنزلق مع تأثيرات الرسوم المتحركة

الدافع من البرنامج المساعد هو تمكينك من تضمين خلفية الفيديو في WordPress مع تأثيرات شريط التمرير. يوفر المكون الإضافي 11 حركة خلفية ، والقدرة على إضافة موسيقى خلفية ، وتكامل فيديو YouTube و Vimeo ، إلخ.

المكوّن الإضافي متوافق مع أي سمة WordPress أو محرر مثل Gutenberg ، لذا سيكون مستجيبًا وسريعًا على جميع مواقع WordPress الإلكترونية.

التفاصيل الكاملة والتحميل | تجريبي

الآن ، يأتي الجزء الحقيقي. يتطلب الجزء التالي الترميز والأعمال الفنية لمنصة WordPress.

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

1. استخدام Div لإفساح المجال للفيديو.

2. احصل على موضع Div في الجزء العلوي الأيسر من منفذ العرض إما بشكل مطلق أو ثابت. الخطوة التالية هي ضبط ارتفاعه وعرضه على 100٪ ثم ضبط الفهرس z على 1. يحدد Z-index عمق المحتوى.

3. تحجيم فيديو Div باستخدام JavaScript.

4. يتم تغيير حجم شاشة المراقبة وقياس الفيديو مرة أخرى في كل مرة يقوم فيها المستخدم بقياس حجم الفيديو.

5. تأكد من أن الكود يعمل على مختلف المتصفحات وأنظمة تشغيل الهاتف المحمول.

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

BGVIDEO: تنزيل

قم بتنزيل المكون الإضافي وتابع التثبيت العادي (تمامًا مثل تثبيت المكونات الإضافية الأخرى).

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

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

المعلمات هي الارتفاع والعرض و mp4 و webm و ogg والتشغيل التلقائي والحلقة والكتم والثابت. يشير الارتفاع والعرض إلى ارتفاع وعرض الفيديو على التوالي. تشير الحقول mp4 و webm و ogg إلى عنوان URL لتنسيق الفيديو المعني. من الضروري تقديم عنوان URL لكل تنسيق حتى يتم تشغيل الفيديو على أجهزة متعددة دون أي مشكلة.

إضافة مقاطع فيديو إلى مكتبة الوسائط

تتضمن الخطوة التالية إضافة مقاطع فيديو إلى مكتبة الوسائط. تأكد من إضافة جميع التنسيقات (webm ، ogg ، mp4) إلى مكتبة الوسائط.

بمساعدة bgvideo ، يتم تحويل الرموز القصيرة للفيديو إلى bgvideo.

يبدو الرمز القصير للفيديو أدناه

[٪ video width = ”1280 ″ height =” 720 ″ mp4 = ”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4 ″] [/ فيديو] [٪ فيديو العرض = ”1280 ″ height =” 720 ″ webm = ”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”] [/ فيديو]

<a٪ href = ”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”> <img٪ class = "محاذاة بحجم كبير wp-image-1392 ″ src = ”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt = ”video-background-test” width = ”1024 ″ height =” 576 ″ />

لا تنس إزالة النسبة المئوية (٪) تسجيل أمام رمز الفيديو القصير وعلامة الربط.

بمساعدة bgvideo ، سيتم تحويل الكود أعلاه إلى الكود أدناه

 [bgvideo width = "1280" height = "720" 
  mp4 = "http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm = "http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  ملصق = "http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  ثابت = "لا"]

يقوم المكون الإضافي تلقائيًا بتغيير الرمز القصير للفيديو إلى الرمز المختصر لـ bgvideo.

جعل الفيديو شفافًا للمستخدم

مع إعداد كل شيء ، تحتاج إلى القيام ببعض السحر في خاصية CSS للصفحة. السبب هو حقيقة أن محتوى الصفحة يعيق عرض الفيديو.

سيزيل CSS محتوى الصفحة ويسمح بتألق الفيديو للزائرين.

أدخل كود CSS أدناه لجعل كل شيء يعمل بشكل جيد.

#صفحة{

الخلفية: لا شيء ؛

}

هناك الكثير من التعديلات الأخرى اللازمة لإعداد خلفية الفيديو بالكامل.

يتم إحتوائه

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

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

يمكن تشكيل الرسوم المتحركة بسهولة باستخدام CSS أو تحميلها من خلال تغيير الخلفية العادية.

يعد تعقيد خلفية الفيديو قليلاً في الجانب الأعلى ويمكن لمجتمع WordPress أو الفريق الأساسي ملاحظة ذلك وإجراء تغييرات في إصداراتهم القادمة.

إذا كان لديك مقطع فيديو وترغب في تحويله إلى ملف gif ، فهناك مورد عبر الإنترنت يمكنه القيام بذلك نيابة عنك. لكن لم يتم تحسين GIF المحولة وتحمل الكثير من الوزن معهم.

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

إذا كنت تستخدم جهاز Mac ، فبطبيعة الحال ، يمكنك استخدام iMovie لأنه مثبت مسبقًا على جهاز الكمبيوتر الخاص بك (إذا لم يكن كذلك ، يمكنك الحصول عليه مجانًا). وإذا كنت تستخدم نظام التشغيل Windows - يعد VSDC Free Video Editor خيارًا رائعًا. إنه يحتوي حرفيًا على كل ما قد تحتاجه بدءًا من مجموعة أدوات التقسيم / الاقتصاص الأساسية إلى تصحيح الألوان والإعدادات المسبقة لنمط الفيديو. بالإضافة إلى ذلك ، فهو قوي حقًا عندما يتعلق الأمر بالتنسيقات ، ولن تحتاج إلى التضحية بجودة ملف الإخراج.

هل تعتقد أني فاتني شيء؟ التعليق أدناه، واسمحوا لنا أن نعرف.

* آخر تحديث في 02/25/2019