recent
أخبار ساخنة

عرض فيديوهات YouTube في موقعك باستخدام HTML

محمد تركي العلوش
الصفحة الرئيسية
طريقة عرض فيديوهات YouTube في موقعك

عرض فيديوهات YouTube في موقعك

لإضافة فيديوهات YouTube إلى موقعك باستخدام HTML، يمكنك استخدام علامة <iframe>. إليك الخطوات:

  1.    احصل على رابط الفيديو: افتح الفيديو الذي تريد عرضه على YouTube وانسخ رابط الفيديو. 
  2.   احصل على كود التضمين: انقر على زر "مشاركة" (Share) تحت الفيديو، ثم اختر "تضمين" (Embed). ستظهر لك نافذة تحتوي على كود التضمين. 
  3.   انسخ كود التضمين: انسخ الكود الذي يظهر في النافذة. سيكون شيئًا مثل هذا: 
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

   استبدل VIDEO_ID بمعرف الفيديو الخاص بك.

 ثم ألصق الكود في موقعك: افتح ملف HTML الخاص بموقعك وألصق الكود في المكان الذي تريد أن يظهر فيه الفيديو. 

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عرض فيديو YouTube</title>
</head>
<body>
    <h1>فيديو YouTube المضمن</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</body>
</html>

 يمكنك ضبط عرض وارتفاع الفيديو عن طريق تغيير قيم width وheight.

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

 كيف يمكنني التحكم في حجم الفيديو بشكل أفضل؟

 للتحكم في حجم فيديو YouTube بشكل أفضل على موقعك باستخدام HTML، يمكنك استخدام CSS لجعل الفيديو يتناسب مع تصميم موقعك. إليك بعض الطرق لتحقيق ذلك:

1. استخدام النسب المئوية

 بدلاً من تحديد العرض والارتفاع بشكل ثابت، يمكنك استخدام النسب المئوية لضبط حجم الفيديو بشكل مرن. إليك مثال: 

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عرض فيديو YouTube</title>
    <style>
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* نسبة 16:9 */
            height: 0;
            overflow: hidden;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>فيديو YouTube المضمن</h1>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

 2. استخدام max-width

يمكنك استخدام max-width في CSS لتحديد أقصى عرض للفيديو مع الحفاظ على تناسب الأبعاد:

 

.video-container iframe {
    max-width: 100%; /* أقصى عرض 100% من العنصر الأب */
    height: auto; /* الارتفاع يتناسب مع العرض */
}

 3. التحكم في العرض والارتفاع

 إذا كنت تريد تحديد حجم ثابت، يمكنك ضبط القيم مباشرة في iframe، لكن يفضل استخدام النسب المئوية أو max-width للحصول على تصميم مرن:

<iframe width="800" height="450" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ملاحظات

  • تأكد من أن التصميم يتلاءم مع جميع الأجهزة (Responsive Design).
  • استخدم النسب المئوية لجعل الفيديو يتكيف مع حجم الشاشة.
     
google-playkhamsatmostaqltradent