Scribd
Upload
27 views4 pages

Embedding Content

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views4 pages

Embedding Content

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Embedding Content

Embedding content involves integrating external elements, such as videos,


audio, maps, or other HTML documents, seamlessly within a webpage.

Embedding Audio
To embed audio content on a web page using HTML, you can use the
<audio> tag, specifying the audio file's source using the "src" attribute.
<audio> -The <audio> tag is used to embed audio content on a web page.

Syntax:

<audio controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

Attributes:
● src: Specifies the URL of the audio file to be embedded.
● controls: Adds playback controls (play, pause, volume, etc.) to the
audio player.
● autoplay: Automatically starts playing the audio when the page is
loaded.
● loop: Specifies that the audio will start over again, every time it is
finished.
● preload: Specifies whether the audio should be loaded when the page
loads. It can take values such as "auto", "metadata", or "none".
● muted: Specifies that the audio output should be muted by default.
● volume: Specifies the default volume of the audio player, ranging from
0.0 to 1.0.
● type:The ‘type’ attribute specifies the MIME type of the media file.

Note: Within the <audio> tag, you can use one or more <source> tags to
specify different audio files in different formats. This allows the browser to
choose the most suitable format based on its capabilities.

1|Page
Embedding Video

<video>-The <video> tag is used to embed video content on a web page.

Syntax:

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


<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

Attributes:
● src: Specifies the URL of the video file to be embedded.
● controls: Adds playback controls (play, pause, volume, etc.) to the video
player.
● autoplay: Automatically starts playing the video when the page is
loaded.
● loop: Specifies that the video will start over again, every time it is finished.
● preload: Specifies whether the video should be loaded when the page
loads. It can take values such as "auto", "metadata", or "none".
● muted: Specifies that the video output should be muted by default.
● poster: Specifies an image to be displayed while the video file is
downloading, or until the user hits the play button.
● width: Specifies the width of the video player.
● height: Specifies the height of the video player.
● autoplay: Specifies that the video will start playing automatically,
without requiring any user input.

Note: The <source> tag specifies the source file and its type.

Embedding Audio and Video

HTML Code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Audio and Video Example</title>
</head>
<body>
<h2>Embedded Audio</h2>

2|Page
<audio controls>
<source src="audio/sample.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h2>Embedded Video</h2>
<video width="640" height="360" controls>
<source src="video/sample.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>

NOTE: Make sure to replace "audio/sample.mp3" and "video/sample.mp4"


with the actual paths to your audio and video files. This code will create a
simple webpage with embedded audio and video elements, allowing users
to play and control the media. The text "Your browser does not support the
audio/video element." is placed after the <source> tag. If the browser
cannot play the specified audio/video file, it will display this message as
fallback content.

Embedding iframes

iframes:

An <iframe> (Inline Frame) is an HTML element used to embed another HTML


document or external content within the current HTML document. It allows you
to include content from another source, such as a different webpage or
media, seamlessly within your page.

Syntax:

<iframe src="url-to-external-content" width="600"


height="400" frameborder="0" allowfullscreen></iframe>

Attributes:

● src (source): Specifies the URL of the content you want to embed within
the iframe.
● width and height: Set the dimensions (width and height) of the iframe.
● frameborder: Defines whether or not to display a border around the
iframe. A value of "0" means no border.
● allowfullscreen: Enables the iframe to be displayed in fullscreen mode.
This is often used for embedded videos.

3|Page
Embedding an External Website

HTML Code Output


<body>
<h2>Embedded Google
Map</h2>
<iframe
src="https://www.goo
gle.com/maps/embed?pb=!1m18!1m1
2!1m3!1d3151.284224548194!2d-
122.08375978465067!3d37.4219999
7984377!2m3!1f0!2f0!3f0!3m2!1i1
024!2i768!4f13.1!3m3!1m2!1s0x80
8f7e889a6a9913%3A0xe5a4ac62e831
72e9!2sGolden%20Gate%20Bridge!5
e0!3m2!1sen!2sus!4v161964062214
1!5m2!1sen!2sus"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
></iframe>
</body>

This HTML code snippet embeds a Google Map of the Golden Gate Bridge
into a web page using an iframe element. The src attribute of the iframe
specifies the URL of the Google Maps page with parameters defining the
location of the Golden Gate Bridge.

The width and height attributes determine the dimensions of the


embedded map. With the allow full screen attribute set, users can view the
map in full screen mode. Additionally, the loading attribute is set to "lazy,"
indicating that the iframe content will be loaded only when it becomes
visible in the viewport, improving page loading performance.

4|Page

You might also like