Media Elements

IN HTML, we can add media elements using media elements tags such as
<picture> <audio> <video> <iframe>

Media Elements in HTML:

1. Picture
2. Audio
3. Video
4. Maps
5. youtube Videos

<audio>
It is used to add the audio files to our web page. We can add the following attributes for additional features:
controls- start,stop,pause,volume
loop- continuous process
muted- mutes the audio unless it is disabled

<audio controls loop muted>
      <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3" />
    </audio>

<video>
we can add video files to our web page using this video tag. we can enable the following features by using the attributes.

controls- start,stop,pause,volume
loop- continuous process
muted- mutes the audio of the video unless it is turned off

<video controls loop muted>
      <source
        src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"/>
    </video>

<iframe>
This tag is used for adding the maps and external website video to the web page. Users can modify according to their convenience.

Youtube Videos

<iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/ZNWu2BWfPYc?si=wTXoCtVNSVbfW9OP"
      title="YouTube video player"
      frameborder="0"
      allow="
        accelerometer;
        autoplay;
        clipboard-write;
        encrypted-media;
        gyroscope;
        picture-in-picture;
        web-share;
      "
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>

Maps

<iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31469.911010189822!2d78.70012115992618!3d9.617737652610943!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b01a96e6c257f2b%3A0x7ee4a4b8935d1295!2sSalaigramam%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1785915373307!5m2!1sen!2sin"
      width="600"
      height="450"
      style="border: 0; margin-top: 2%; margin-left: 5%;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="strict-origin-when-cross-origin"
    ></iframe>