"I am Saqib Jahangir. A passionate vlogger, software engineer, and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Multimedia Tags

 

Adding multimedia content like audio, video, or embedding other websites makes your webpages richer and more engaging. HTML provides special tags for this.

1. <audio>

The <audio> tag is used to embed sound files on your webpage, such as music or podcasts.

Basic Syntax:

<audio controls>

  <source src="sound.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

  • controls: Adds play, pause, volume controls.
  • <source> specifies the audio file and its format.
  • The text inside <audio> is fallback content for browsers that don’t support it.

Example:

<audio controls>

  <source src="song.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

2. <video>

The <video> tag is used to embed video files.

Basic Syntax:

<video width="640" height="360" controls>

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

  • width and height: Control the size of the video player.
  • controls: Shows play, pause, and volume controls.

Example:

<video width="640" height="360" controls>

  <source src="sample-video.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

3. <iframe>

The <iframe> tag lets you embed another webpage inside your page — like a YouTube video, Google Maps, or another website.

Basic Syntax:

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

  • src: URL of the page you want to embed.
  • width and height: Size of the iframe.
  • frameborder="0" removes the border around the iframe (optional).

Example: Embed a YouTube Video

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allowfullscreen>

</iframe>

Practice with XAMPP/WAMP

  1. Create a file multimedia.html in your server folder.
  2. Paste the following:

<!DOCTYPE html>

<html>

<head>

  <title>Multimedia Examples</title>

</head>

<body>

 

  <h2>Audio Example</h2>

  <audio controls>

    <source src="audio-file.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

  </audio>

 

  <h2>Video Example</h2>

  <video width="480" height="270" controls>

    <source src="video-file.mp4" type="video/mp4">

    Your browser does not support the video tag.

  </video>

 

  <h2>Iframe Example</h2>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

      title="YouTube video player" frameborder="0" allowfullscreen></iframe>

 

</body>

</html>

  1. Replace "audio-file.mp3" and "video-file.mp4" with your actual media files stored locally or online URLs.
  2. Open the page in your browser to see audio, video, and embedded content.

 

Popular Posts

Setting Up Your First Project Folder and Installing XAMPP or WAMP

    Setting Up Your First Project Folder and Installing XAMPP or WAMP Before you start coding, it’s important to set up your project folder and install a local server like XAMPP or WAMP. These local servers let you run PHP and databases right on your computer, so you can develop websites without needing an internet connection or hosting. Step 1: Installing XAMPP or WAMP XAMPP and WAMP are popular local server solutions for Windows (XAMPP also works on Mac/Linux). XAMPP includes Apache (server), MySQL (database), PHP, and more. WAMP includes Apache, MySQL, and PHP — specifically for Windows. You can download them here: Download XAMPP Download WAMP Follow the installation wizard , accept default options, and complete the setup. Step 2: Locating Your Server’s Root Folder After installation, you need to know where to save your website files so the server can access them. For XAMPP , the root folder is: C:\xampp\htdoc...
Read more

Frontend vs Backend vs Full Stack

  🧠 Frontend vs Backend vs Full Stack – What’s the Difference? If you're just starting your journey in web development, you’ve probably heard terms like frontend , backend , and full stack . But what do they actually mean? Let’s break them down in a simple and beginner-friendly way! 🌐 What is Frontend Development? The frontend is everything you see and interact with on a website. Think of it as the “face” of the website — the layout, design, buttons, colors, menus, images, and text. Frontend developers use three main technologies: ·          HTML – for structure ·          CSS – for styling ·          JavaScript – for interactivity Examples of frontend work: ·          Creating navigation menus ·          Designing contact forms ·   ...
Read more