دليل المدون

2014-11-21

إضافة فيديو بأعلى جودة و مناسب للشاشات المتعددة إلى موقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين 

سيدنا محمد وعلى آله وصحبه أجمعين

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

إقرأ أيضًا: كيفية صنع مقاطع فيديو ناجحة على الإنترنت

أولا: التحكم بجودة فيديو اليوتيوب و حل مشكلة قلة الجودة 

عند تشغيل أى فيديو على اليوتيوب فإنه يعمل تلقائيًا بجودة قليلة ليناسب الإتصالات البطيئة مما يجعلنا نضطر لرفع الجودة يدويا للحصول على صورة أوضح.
youtube Hd
ولكن إذا كان موقعك يحتوى على فيديو وأردت أن يعمل تلقائيا بجودة عالية فعليك بإتباع هذه الخطوات:
1. إذهب إلى الفيديو على اليوتيوب و إضغط مشاركة "share"  ثم إضغط تضمين " Embed "
ثم إنسخ كود التضمين والصقه بالمكان المناسب فى موقعك
embed youtube

https://www.tubebuddy.com/condaianllkhir
2. بعد ذلك قم بالتعديل على كود التضمين بإضافة الرموز الخاصة بالجودة وذلك بعد رابط تضمين الفيديو مباشرة وهى ملونة باللون الأخضر فى الأكواد الآتية - أو يمكن نسخ أحد الأكواد الآتية إلى موقعك حسب نوع الجودة التى تريدها وتغيير رابط تضمين الفيديو بالرابط الخاص بك.

تشغيل الفيديو تلقائيًا بأعلى جودة HD

<iframe width="620" height="465" src="//www.youtube.com/embed/i2Yh_oBJ8Ds&hd=1" frameborder="0" allowfullscreen>

تشغيل الفيديو تلقائيًا بجودة 1080p

<iframe width="620" height="465" src="//www.youtube.com/embed/i2Yh_oBJ8Ds?rel=0&amp;vq=hd1080" frameborder="0" allowfullscreen>

تشغيل الفيديو تلقائيًا بجودة 720p

<iframe width="620" height="465" src="//www.youtube.com/embed/i2Yh_oBJ8Ds?rel=0&amp;vq=hd720" frameborder="0" allowfullscreen>

تشغيل الفيديو تلقائيًا بجودة 480p

<iframe width="620" height="465" src="//www.youtube.com/embed/i2Yh_oBJ8Ds?rel=0&amp;vq=hd480" frameborder="0" allowfullscreen>

إقرأ ايضا:  اضف رابط نصى لموقعك على  فيديو اليوتيوب

ثانيًا: تفعيل خيار  fullscreen option

إذا أردت أن تفعيل عرض الفيديو بملئ عرض الشاشة تأكد من وجود وسوم allowfullscreen> بكود التضمين وهو غالبًا يكون موجود عند تضمين الفيديو بالطريقة السابق شرحها iframe ولكنه لايوجد عند تضمين الفيديو ببعض الطرق الأخرى.
  fullscreen

ثالثًا:كيف تجعل الفيديو مناسب للشاشات المتعددة (الموبايل/ التابلت) Responsive video

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


 إستبدل الكود الملون بالأحمر بكود تضمين الفيديو الخاص بك داخل الكود التالى :

<style type="text/css">
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<br />
<div class="video-container">
<iframe width="620" height="465" src="//www.youtube.com/embed/i2Yh_oBJ8Ds?rel=0&amp;vq=hd1080" frameborder="0" allowfullscreen>  </div>
 
إقرأ ايضًا: 

إضافة بتقنية jquery تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة

تعديل الفيديو على يوتيوب مباشرة

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 8 تعليقات

  1. شكرا كثيرا لكي
    بارك الله فيكي

    ردحذف
  2. شكرا لك دائما تقدمي مواضيع في القمة استمري وواصلي
    matchkoura.blogspot.com/

    ردحذف
  3. موضوع مفيد شكرا جزيلا ممكن تقييم http://www.abou-nizar.com/

    ردحذف
  4. شكرا جزيلا لك موضوع رائع جدا

    ولكن هل يوجد كود لجعل (جميع الفديوهات) بالموقع تتناسب تلقائيا مع المتصفحين من الجوال

    ردحذف
  5. أشكركم جميعًا على متابعتكم القيمة
    @ anas 16572
    بالنسبة لكود يجعل جميع الفيديوهات متجاوبة فسأتناول هذا الأمر فى الفترة القادمة وأشرحه بموضوع جديد قريبًا بإذن الله

    ردحذف
  6. للأسف جربتها ولم تنجح . أظن أن يوتيوب عطلت هذه الخاصية

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون