HTML for Media


HTML5 introduced several new media elements that allow developers to embed and control multimedia content in web pages more easily and efficiently. Here are the main HTML5 media elements:


  1. <audio>: This element is used to embed sound content in documents. It supports multiple formats like MP3, WAV, and Ogg.


<audio controls>
  <source src=”audio-file.mp3″ type=”audio/mpeg”> 
   <source src=”audio-file.ogg” type=”audio/ogg”> 
   Your browser does not support the audio element.
</audio>

  • controls: The browser’s default <audio> controls include play/pause, seek bar, volume control, and mute option.
  • source : Allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
  • The text  will only be displayed in browsers that do not support the <video> element.


  1. <video>: This element is used to embed video content in documents. It supports formats like MP4, WebM, and Ogg.


<video width=”320″ height=”240″ controls>
  <source src=”video-file.mp4″ type=”video/mp4″>
  <source src=”video-file.webm” type=”video/webm”>
  Your browser does not support the video tag.
</video>

  • controls: The browser’s default <video> controls include play/pause, seek bar, volume control, mute option, fullscreen, and sometimes download.
  • width and height: Set the video dimensions.


    1. <track>: This element is used as a child of the <video> or <audio> elements to specify text tracks (like subtitles, captions, and descriptions).


    <video width=”320″ height=”240″ controls>
      <source src=”video-file.mp4″ type=”video/mp4″>
     <track src=”subtitles-en.vtt” kind=”subtitles” srclang=”en” label=”English”>
      Your browser does not support the video tag.
    </video>


    1. <source>: This element is used to specify multiple media resources for the <audio> or <video> It allows the browser to choose the most suitable one.


    <video width=”320″ height=”240″ controls>
      <source src=”video-file.mp4″ type=”video/mp4″>
      <source src=”video-file.webm” type=”video/webm”>
      Your browser does not support the video tag.
    </video>


    These media elements provide native support for audio and video, which means they do not require third-party plugins like Flash. They also come with built-in controls for play, pause, volume, and other functionalities, making it easier to integrate and control multimedia content on web pages.


    Using <iframe> to Embed Media in HTML 5

    Using the <iframe> element to embed media in HTML5 is a common practice, especially when you want to display content from another website within your own web page. Here’s how you can use <iframe> to embed media:

    1. Embedding a YouTube Video

    To embed a YouTube video using an <iframe>, you can follow these steps:

    1. Go to the YouTube video you want to embed.
    2. Click on the “Share” button below the video.
    3. Click on “Embed”.
    4. Copy the provided <iframe> code.

    Here is an example:

    <iframe 
        width=”560″ 
        height=”315″ 
        src=”https://www.youtube.com/embed/VIDEO_ID” 
        frameborder=”0″ 
        allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” 
        allowfullscreen>
    </iframe>

    Replace VIDEO_ID with the actual ID of the YouTube video you want to embed.

    • accelerometer: Allows access to device motion data (movement/orientation) for interactive features.
    • autoplay: Enables media to start playing automatically when the page loads.
    • encrypted-media: Allows playback of DRM-protected encrypted content.
    • gyroscope: Provides access to the device’s gyroscope sensor for rotation/tilt detection.
    • picture-in-picture: Enables video to play in a floating, mini window while browsing.
    • allowfullscreen: Allows the content to enter fullscreen mode when requested.


    2. Embedding an Audio Player

    While it’s more common to use the <audio> tag for embedding audio, you can also use an <iframe> to embed an audio player from services like SoundCloud:


    <iframe 
        width=”300″ 
        height=”100″ 
        scrolling=”no” 
        frameborder=”no” 
        allow=”autoplay” 
        src=”https://websiteforsound.com/[username]/[track]”>
    </iframe>


    3. Embedding Other Web Content

    You can use <iframe> to embed other types of web content, such as PDF files, other websites, or web apps:

    <iframe
     src=”https://example.com”
     width=”600″
     height=”400″
     frameborder=”0″>
    </iframe>


    Considerations

    1. Security: Ensure the content you embed is from a trusted source. Embedding untrusted content can expose your site to security risks.
    2. Responsiveness: Make sure the <iframe> is responsive. You can use CSS to make the embedded content adapt to different screen sizes.
    3. Browser Support: Most modern browsers support the <iframe> element, but always test the embedded content to ensure it works as expected across different browsers.


    When to Use <iframe> vs. HTML5 <video> or <audio>

    If you want to offer short video or audio clips that you own on your site, the audio and video elements provide an easy way to host these files on your own server and serve them up to your website visitors. However, if the files you want to add to your site are hosted by a website like YouTube that offers an embed script, you should use it and let that site handle playback.

    In addition, if the clips you plan to add are very long, or if you expect heavy traffic, your website visitors will probably have a better experience if you upload your media file to a service like YouTube of Vimeo and embed the videos using iframes.

    Scroll to Top