كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات بلوجر أو مدونتك؟

كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات بلوجر أو مدونتك؟

كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات بلوجر أو مدونتك؟
مع تزايد الوصول إلى الإنترنت من أجهزة الجوال ، لم يعد يكفي أن يكون لديك تصميم موقع ويب ثابت يبدو جيدًا فقط على شاشة الكمبيوتر.

يمكن أن يكون دمج مقاطع فيديو YouTube في منشورات Blogger أو مدونتك طريقة رائعة لجذب انتباه القراء وإثراء محتوى موقعك. 


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


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

› انشاء مدونة بلوجر بعد التحديثات الجديدة


لحل هذه المشكلة،

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


في هذه المقالة، سنقدم لك خطوات سهلة لجعل مقاطع فيديو YouTube تستجيب في منشورات Blogger أو مدونتك.


الخطوات:

  • قم بتحميل مقطع الفيديو الخاص بك على YouTube.
  • انتقل إلى مدونتك وقم بإنشاء منشور جديد.
  • اضغط على "إدراج" ثم "فيديو".
  • أدخل عنوان URL لمقطع الفيديو الخاص بك من YouTube.
  • حدد "استجابة".
  • اضغط على "نشر".


كيفية جعل فيديو YouTube مستجيبًا في موقع Blogger؟ 

اجعل فيديو YouTube الخاص بك يستجيب في قالب Blogger باستخدام CSS Script بسيط لاعتماد أي حجم على أي جهاز.


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


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


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


يجب أن نتخذ خطوات إضافية لجعلها مستجيبة.

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


ما هو تصميم الويب سريع الاستجابة؟

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


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


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


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


لا يكفي أن يبدو موقع الويب الخاص بك جيدًا على شاشة الكمبيوتر. 🖥 الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة 2 في 1 والهواتف الذكية كلها جزء من المعادلة ...


 ويغطي هذا الدليل كل ما تحتاج لمعرفته حول التصميم سريع الاستجابة


كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات مدونتك؟

› شرح واجهه بلوجر الجديده بعد التحديثات الاخيرة


تصميم الويب سريع الاستجابة مقابل التصميم التكيفي

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


يوفر التصميم التكيفي عدة إصدارات مختلفة تمامًا من نفس الصفحة.


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


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


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


لماذا يهم التصميم المستجيب

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


الجواب بسيط. لم يعد يكفي التصميم لجهاز واحد. تجاوزت حركة مرور الويب عبر الأجهزة المحمولة سطح المكتب وتشكل الآن غالبية حركة مرور موقع الويب ، حيث تمثل أكثر من 51٪.


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


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


أخيرًا ، على مدار السنوات القليلة الماضية ، أصبح الهاتف المحمول أحد أهم القنوات الإعلانية. حتى في سوق ما بعد الجائحة ، ينمو الإنفاق على إعلانات الهاتف المحمول بنسبة 4.8٪ ليصل إلى 91.52 مليار دولار.


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


إذا لم تكن صفحاتك المقصودة مُحسَّنة للجوّال وسهلة الاستخدام ، فلن تتمكن من زيادة عائد الاستثمار لجهودك التسويقية. ستؤدي معدلات.


التحويل السيئة إلى تقليل عدد العملاء المحتملين وإهدار الإنفاق الإعلاني:


كيف تجعل مقاطع فيديو YouTube تستجيب في منشورات مدونتك؟

› طريقة تركيب او اضافة قالب بلوجر الى مدونة الخاص بنا


في النهاية ، لن تعمل استجابة النموذج الخاص بك.

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

  • لجعل فيديو YouTube مستجيبًا ، يمكنك إضافة
  • التعليمات البرمجية التالية إلى ملف CSS الأساسي الخاص بنموذج Blogger أو ورقة الأنماط
  • يتم تطبيقها على موقعك. ما عليك سوى اتباع الخطوات التالية-


  1.  الخطوة 1 قم بتسجيل الدخول إلى حساب Blogger الخاص بك
  2. وانتقل إلى لوحة تحكم Blogger
  3. الخطوة 2 انقر فوق -> Template EditHTML
  4. الخطوة 3 الآن ابحث عن]]> </ b: skin> بالضغط على Ctrl + F (Windows) أو CMD + F (Mac)
  5. الخطوة 4 انسخ البرنامج النصي من الأسفل والصقه أعلاه / قبل]]> </ b: skin>



.tubevideo {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

}


.tubevideo iframe,

.tubevideo object,

.tubevideo embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}


6- الخطوة 7: اضغط على زر حفظ القالب من الأعلى.

7- إذا كنت ترغب في استخدام نص CSS أعلاه في صفحة معينة

8- ثم أضف كود CSS داخل علامة <style>.



<style>

CSS script Here…

</style>


لقد أضفنا نص CSS والآن سنضيف HTML

برنامج نصي لعرض فيديو YouTube بتقنيات سريعة الاستجابة.

› كيفية إنشاء او أخد نسخة احتياطية كاملة من مدونة Blogger


كيفية عرض فيديو يوتيوب في Blogger Blog Post؟

  1. الخطوة 1 انتقل إلى لوحة تحكم Blogger وانقر فوق الزر منشور جديد لإنشاء محتوى جديد أو تحرير أي منشور.
  2. الخطوة 2 من محرر النشر ، قم بالتبديل للعرض من طريقة عرض الإنشاء.
  3. الخطوة 3 الآن انسخ نص HTML أدناه والصقه في محرر النشر أثناء عرض HTML.

<div class="tubevideo">

<iframe width="560" height="315" src="https://www.youtube.com/embed/aom_UhSlhAo" frameborder="0" allowfullscreen></iframe>

</div>


الكود المستعمل في الحلقة 

- استنتاج : التجاوب جانب مهم من القالب يجب الاهتمام به و اخذه بعين الاعتبار فزوارك يحتاجون الى قالب يسمح لهم بتصفح موقعك في اي مكان وبأي جهاز , فحاول ان توفر لهم مايحتاجونه .


واذا كنت مبتدئا في التعامل مع اكواد css فجرب ان تتعلمها من تتعرف على كيفية التعامل معها , لتصنع في المستقبل قالبك الخاص .

- الكود :

بعد ذلك سنضغط على زر " تحريربعد ذلك يتم العمل عل الكود التالي , نبحث عن الوسم/b:skin> ونلصق فوقه الكود التالي :
   


<!-- CODE by www.chrohat.com--> 
/*------start youtube responsive chrohat.com ------*/
.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 chrohat.com ------*/
<!--CODE by www.chrohat.com--> 

› كيف عرض صور تنسيق الجيل الجديد WebP في Blogger


نصائح إضافية:

استخدم مُكوّن الفيديو المُدمج في Blogger. يُتيح لك ذلك التحكم في حجم الفيديو وموقعه على الصفحة.

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

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

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


خلاصة

ستعمل هذه التقنية على تقليل حجم صفحة الويب الخاصة بك بمقدار 350 كيلو بايت إلى 400 كيلو بايت مع جعل موقع الويب الخاص بك مستجيبًا.


يرجى التعليق أدناه إذا كانت لديك أية مشكلات تتعلق بتنفيذ الأكواد المذكورة أعلاه على مدونة بلوجر الخاصة بك.

للمزيد من التوضيح الدرس فرجة ممتعة


› متابعة حلقات دورة بلوجر
› موقع مستعمل 
› الموقع الاول : Mobile Friendly
› المزقع  التاني : Mobile Friendly
› الموقع التالت : Mobile Friendly

أضف تعليق

Comments