القائمة الرئيسية

الصفحات

تضمين فيديوهات اليوتيوب في HTML

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

أهمية تضمين فيديوهات اليوتيوب

في الدروس السابقة تعلمنا أن لإظهار فيديوهات من خلال لغة HTML في موقعنا أو صفحة الويب  ، يتوجب علينا إتباع بعض الخطوات و أن على الفيديو أن يتواجد إما على الأنترنت أو في الحاسوب الخاص بنا ، وفي هذا الدرس سأريكم طريقة تضمين فيديو من خلال موقع اليوتيوب أي أنك ستستفيد من موقع اليوتيوب ، كأنه إستضافة تنشر بها الفيديو الخاص بك و بعدها تأخد كود التضمين ، تنسخه و تلصقه ، إذا لنتعرف على طريقة نسخ أو جلب كود تضمين الفيديو ، بعدما نشرته بموقع اليويتيوب أو يمكنك تجربة الطريقة من خلال فيديوهات قناة كودر شيار - Coder Shiyar.

 خطوات تضمين فيديوهات اليوتيوب في موقعك

لتضمين فيديوهات اليوتيوب ، لابد من إتباع بعض الخطوات ، وهي كالتالي : 

1 الدخول لموقع اليوتيوب.

2 إختيار الفيديو اللذي تريد تضمينه ثم الدخول إليه.

3 الضغط على زر المشاركة ، كأنك تريد مشاركة الفيديو.

4 ثم الضغط على تضمين.

5 و اخيرا نسخ الرابط.

ولكن ، ماذا بعد هذه الخطوات وأين سألصق الرابط أو كود التضمين بعدما نسخته؟ تابع معي الدرس لتفهم.

بعدما نسخنا الكود الخاص بالتضمين ، يجب علينا فتح برنامج محرر الأكواد Visual Studio Code ، ثم إنشاء ملف جديد خاص بلغة HTML كما علمتكم بالدروس السابقة ، ثم حفظ الملف ، وبعدها كتابة العناصر الأساسية من خلال الكود التالي : html:5 ، وهانحن الان في أهم فقرة من الدرس و هي نسخ كود التضمين داخل العنصر body ، من خلال نسخك للكود ستتعرف تلقائيا على إسم العنصر ، فماهو إسمه إذا ؟ سأترك لكم الفرصة للإجابة على أول إختبار لكم في الأسفل بالتعليقات.

ميزات تضمين فيديوهات اليوتيوب

لكن لازلنا لم نكمل هذا الدرس ، فلدي هدية لكم ، قد تلاحظ أن عند الدخولك لصفحة الويب الخاصة بك أو موقعك ، ثم عند الضغط على زر تشغيل الفيديو و بعدها توقيف الفيديو، يتم ظهور لك بعض الصور الصغيرة للفيديوهات الاخرى ، لكن المشكل ليس هنا بل بعض من تلك الفيديوهات ليست لقناتك و لاتريد أن تظهر ، فكيف يمكنك حل هذه المشكلة ؟ لحل هذه المشكلة عليك إضافة الكود التالي : ?rel ثم تساوي و بعدها مع وضغ القيمة 0 أي عليك إضافة الكود التالي : ?rel=0.

أيضا يمكنك تحديد العرض و الطول حسب ماتريد بتغيير المقاييس ، لكن في بعض الحالات عندما تغير المقاييس يكون الفيديو غير متناسق ، إذا كيف يتم حل هذه المشكلة؟ بكل سهولة يمكنك ذلك عبر فتح الة حاسبة من خلال الكمبوتر ، ثم قم بتقسيم العدد 315 على 560 ، وبعدما تظهر لك النتيجة قم بقسمة النتيجة على العدد اللذي تريد أن يكون هو العرض ، وبعدها إنسخ العدد و ألصقه بمكان الإرتفاع ، وبهذه الطريقة يمكنك تحديد العرض و الارتفاع بالطريقة الصحيحة ، وطبعا يمكنك من خلال لغة السي اس اس - css تحديد متى يكون العرض x عند حجم الشاشة y.

هكذا نكون قد أنهينا الدرس ، أتمنى لكم التوفيق و أراكم بالدرس القادم.

مشاهدة الدرس

تعليقات