درس ٦: الصوت والفيديو + الـ iframe

اليوم نضيف يوتيوب، سبوتيفاي، خرائط جوجل، وفيديوهاتنا الخاصة بثواني!

تخيّل أن زائر موقعك يسمع صوتك، يشاهد فيديو درسك، أو يرى موقعك على خريطة جوجل…
كل هذا بثلاث وسوم فقط: <audio>، <video>، <iframe>

في هذا الدرس سنتعلم كيف نضيف الصوت والفيديو من جهازنا أو من الإنترنت، وكيف نضع أي موقع آخر داخل موقعنا باستخدام الـ iframe (مثل يوتيوب، خرائط جوجل، تويتر، واتساب، إلخ). كل شيء بسيط ومجاني ويعمل فورًا!

١. وسم الصوت <audio> – شرح كامل لكل شيء

صوت من جهازك (الطريقة الصحيحة)

<audio controls>
  <source src="audio/my-voice.mp3" type="audio/mp3">
  <source src="audio/my-voice.ogg" type="audio/ogg">
  المتصفح لا يدعم الصوت
</audio>

شرح كل سمة في وسم <audio>:

<audio> → الوسم الرئيسي لتشغيل الصوت
controls → يظهر شريط التحكم (تشغيل، إيقاف، الصوت، الوقت)
<source> → نحدد فيه ملف الصوت (يمكن أكثر من صيغة)
src="" → مسار الملف الصوتي
type="" → نوع الملف (mp3, ogg, wav) – مهم للمتصفحات القديمة
autoplay → يشغّل الصوت تلقائيًا عند تحميل الصفحة
loop → يعيد الصوت من الأول عند الانتهاء
muted → الصوت مكتوم (ضروري مع autoplay في كل المتصفحات الحديثة)
preload="auto|metadata|none" → كم يحمل المتصفح من الصوت قبل الضغط على تشغيل

صوت تلقائي + حلقة (للخلفيات الموسيقية)

<audio autoplay loop muted>
  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>

ملاحظة مهمة: كل المتصفحات (كروم، سفاري، فايرفوكس) تمنع التشغيل التلقائي بالصوت إلا إذا كان muted أولًا.

٢. وسم الفيديو <video> – شرح كل التفاصيل

فيديو من جهازك (كامل التحكم)

<video controls width="100%" poster="images/thumbnail.jpg">
  <source src="video/intro.mp4" type="video/mp4">
  <source src="video/intro.webm" type="video/webm">
  متصفحك لا يدعم الفيديو
</video>

شرح كل سمة في وسم <video>:

<video> → الوسم الأساسي للفيديو
controls → شريط التحكم الكامل
width / height → حجم الفيديو (استخدم width="100%" للتمدد)
poster="" → صورة تظهر قبل التشغيل (مثل غلاف الفيديو)
autoplay → يشتغل تلقائيًا
loop → يكرر الفيديو إلى ما لا نهاية
muted → صوت مكتوم (ضروري مع autoplay)
playsinline → مهم جدًا للجوال (يمنع الفيديو من الفتح بملء الشاشة تلقائيًا)
preload → كم يحمل من الفيديو مسبقًا

فيديو خ-Mobile (مثل تيك توك وإنستقرام)

<video autoplay loop muted playsinline class="w-full rounded-2xl">
  <source src="https://cdn.coverr.co/videos/coverr-city-traffic-4372/1080p.mp4">
</video>

٣. الـ <iframe> – أقوى وسم في HTML!

الـ iframe يعني "إطار داخلي"، يعني تضع موقع كامل داخل موقعك! يوتيوب، خرائط، واتساب، تويتر، تيك توك… كلهم يعطونك كود iframe جاهز.

YouTube

<iframe width="100%" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="فيديو يوتيوب"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Google Maps

<iframe src="https://www.google.com/maps/embed?pb=..."
  width="100%" height="400" style="border:0;"
  allowfullscreen="" loading="lazy"></iframe>

<a href="https://wa.me/966500000000?text=مرحبا" target="_blank">
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="70" alt="واتساب">
</a>

شرح كل سمة في الـ <iframe>:

src="" → الرابط اللي بداخل الإطار
width / height → أبعاد الإطار
title="" → وصف للمكفوفين (مهم لـ SEO)
allow="" → الأذونات (autoplay, كاميرا، ميكروفون...)
allowfullscreen → يسمح بملء الشاشة (ضروري ليوتيوب)
loading="lazy" → يحمل الإطار لما يقرب منه (يسرّع الموقع)
sandbox → أمان إضافي (يمنع الإطار من عمل أشياء خطيرة)

تمرين اليوم: صفحة "تعرف على مدرستنا" (كاملة + ميديا)

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدرستنا الحبيبة</title>
</head>
<body>
  <h1 style="background:#ea580c;text-align:center;color:white;padding:30px;">
    مرحبًا بكم في مدرستنا
  </h1>

  <!-- فيديو تعريفي -->
  <video controls width="100%" poster="https://picsum.photos/800/400">
    <source src="https://cdn.coverr.co/videos/coverr-school-kids-running-5828/1080p.mp4">
  </video>

  <!-- نشيد المدرسة -->
  <h2 style="text-align:center;margin:30px;">نشيد المدرسة</h2>
  <audio controls style="width:100%;">
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
  </audio>

  <!-- موقعنا على الخريطة -->
  <h2 style="text-align:center;margin:30px;">موقعنا</h2>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3624.5!2d39.6!3d24.47!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15e368e0f9b7e07d%3A0x880ec5d9c99e8a09!2sالمسجد الحرام!5e0!3m2!1sar!2ssa!4v1700000000000"
    width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy">
  </iframe>
</body>
</html>

خلاصة الدرس في ٣ وسوم فقط:

<audio> → للصوت
<video> → للفيديو
<iframe> → لأي موقع آخر

بهذه الثلاثة أصبح موقعك حيًّا ومتكاملاً 100%!

الدرس القادم: السمات (Attributes) + الـ id و class

سنتعلم كيف نسمي العناصر عشان نتحكم في شكلها بالـ CSS لاحقًا!

الصوت و الفيديو والفريم