أخر الاخبار

الرئيسية إظافات بلوجر

كيفية إظافة فيديو يوتيوب متجاوب باحترافية داخل مشاركات بلوجر

مرحبا بكم أصدقائي الكرام في موضوع جديد من دورة بلوجر لكيفية  انشاء مدونة عربية احترافية من الصفر.. 

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

في هذا الموضوع إن شاء الله سنعرف كيفية إظافة فيديو يوتيوب متجاوب باحترافية داخل مشاركات بلوجر..


How to add a professionally responsive YouTube video inside blogger posts

كيفية تضمين فيديو اليوتيوب داخل مشاركات بلوجر وجعله متجاوب مع جميع الشاشات / إظافات بلوجر


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

سواء كمببيوتر أو لاب توب (أجهزة لوحية ذكية) أو شاشات الهواتف المختلفة.
Making Embedded Videos youtube responsive in Blogger


سنشرح طريقة إضافة او إدماج فيديوهات اليوتيوب على مدونة بلوجر
  كيف نجعلها متوافقة ومتجاوبة responsive مع شاشات الاجهزة مثل
 هواتف النقالة و الاجهزة اللوحية لتظهر بشكل متناسق مع حدود الشاشة لاحظ المثال:

 
فى هذا الموضوع الخاص بقسم بلوجر (الإظافات) سوف نشرح  :
1- كيفية دمج وإظافة فيديوهات اليوتيوب فى بلوجر.
2- طرق التعديل على مقاسات فيديوهات اليوتيوب فى مشاركات بلوجر
لجعلها متناسبة مع جميع الشاشات.
إقرأ أيضا:


1- كيفية دمج وإظافة فيديوهات اليوتيوب فى بلوجر.

1- أولا نذهب إلى اليوتيوب ونختار الفيديو الذي نريد تضمينه أو إظافته للمشاركة الخاصة بنا. 

1- First, we go to YouTube and choose the video that we want to include or add to our post



2- نضغط على خاصية مشاركة كما يظهر بالصورة.

2- We click on the share feature as shown in the image




3- نختار زر التضمين الذي يظهر بأقصى اليمين تحت المشاركة مباشرة.

3- We choose the Embed button that appears in the far right, directly below the post.




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

Embedding options




5- حدد الكود الذي سينتج بالأعلى واضغط بزر الفأرة الأيمن على نسخ أو إضغط مباشرة
على كلمة نسخ الموجودة في مربع الحوار بالزر الأيسر

5- Select the code that will be produced above and right-click on copy


6- ثم  قم بالتوجه لمنصة بلوجر 
- واختار مدونتك 
- ثم إضغط على مشاركة جديدة
- ومن داخل المشاركة
قم بكتابة مقالتك بشكل عادي 
- ثم وفي المكان الذي تريد إظافة له الفيديو
 أكتب فيه مثلا أربعة حروف (أ) بالفرنسية ليسهل الأمر في إيجادها لاحقا
مثلا: aaaa
- ثم توجه لزر القلم بالأعلى واضغط على وضع HTML
وابحث عن aaaa
- واستبدله بكود االتضمين الذي حصلت عليه سابقا
في حالتي كان الكود
<iframe width="560" height="315" src="https://www.youtube.com/embed/TTO5MaFaoFI?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


وبعد لصق الكود ستحصل على نتيجة مثل هذه:




2- طرق التعديل على مقاسات فيديوهات اليوتيوب فى مشاركات بلوجر
لجعلها متناسبة مع جميع الشاشات.

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


<iframe width="560" height="315" src="https://www.youtube.com/embed/TTO5MaFaoFI?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



الآن كل ماعلينا فعله هو تغيير عرض الفيديو باللون الأحمر من 560 والتي تعني 560 بيكسل 
في حالة لم يضاف لها أي شيء نحن نغيرها ب100% أي أن عرض الفيديو سيصبح مئة
بالمئة لكل الأجهزة مهما كان نوعها  والإرتفاع نجعله 460 مثلا أو نتركه كما هو أي يصبح فيديو متجاوب ببساطة بتغيير بسيط كهذا
فيصبح الكود الجديد

<iframe width="100%" height="460" src="https://www.youtube.com/embed/TTO5MaFaoFI?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


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

والنتيجة ستكون هكذا:



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

لاكن لاننسى أننا قمنا بالتغيير من داخل المشاركة لكود الفيديو حتى يكون متجاوب وتوجد طريقة أخرى:

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



3- طريقة جعل فيديوهات اليوتيوب متجاوبة عن طريق إظافة بكود القالب الرئيسي


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

1- نذهب للمظهر
- ثم تحرير  HTML
- ثم نضغط على
Cntfl + F
1- نبحث عن الكود التالي:
]]></b:skin>

3- نضيف الكود التالي فوقه مباشرة:
/*------start youtube responsive ------*/
.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%;
}
.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;}
/*------end youtube responsive ------*/

4- نحفظ المظهر

5- الان يجب عليك فى كل مشاركة جديدة على مدونتك تريد إضافة
 او إدماج فيديو اليوتيوب عليها يجب أن تقوم بالتالي :

- فى مشاركة جديد اختر المكان الذي تريد إظافة الفيديو له, ثم اذهب الى تحرير HTML  للموضوع
 و قم باضافة الكود التالي : 
<div class="video-container">  رابط الفيديو الذي تود مشاركته </div>

- فى "  رابط الفيديو الذي تود مشاركته "  ضع مكانه رابط المشاركة 
او الادماج الذي تجده تحت فيديو فى موقع اليوتيوب


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



مواضيع ذات صلة قد تهمك:



ˆFr
وضع القراءة :
حجم الخط
+
16
-
تباعد السطور
+
2
-