• Tutorial List

HTML Embed – Embed audio, video, pdf, youtube video

Last updated Jul 08, 2020
HTML Embed - Embed audio, video, pdf, youtube video

How to embed audio files on HTML pages?

The <audio> tag is used to embed audio files on HTML pages.

<audio controls>
  <source src="test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
  • <audio controls>
    • The controls attribute is used to enable the audio controls. Such as – play, pause, and volume.
  • <audio>Your browser does not…</audio>
    • The text inside the audio tag will appear when the browser does not support the audio element.
  • <source>
    • The audio source element is used to specify the audio file & format of the audio file. And you can also add the alternative audio files by adding multiple source elements.

Specifying alternative audio files

<audio controls>
  <source src="test.ogg" type="audio/ogg">
  <source src="test.wav" type="audio/wav">
  <source src="test.mp3" type="audio/mpeg">
</audio>

First, it will try to open the test.ogg file. If the browser does not support the audio format or failed to open this file, then it will go to next (test.wav) and do the same thing until the end.

If all the audio files fail to open, it will show the file not supported message.

Example:

<audio controls>
  <source src="https://tutorials.w3jar.com/wp-content/uploads/test.mp3" type="audio/mpeg">
</audio>

How to embed video files on HTML pages?

Similar to the audio tag, HTML has the <video> tag for embedding videos on web pages.

And it works the same as the audio tag, just you have to put a video file and the video format into the video source element.

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

Like the audio element, you can also specify the alternative video files.

<video controls>
  <source src="test.ogg" type="video/ogg">
  <source src="test.webm" type="video/webm">
  <source src="test.mp4" type="video/mp4">
</video>

How to change video player size?

With the help of the width and height attribute you can change video player size, and you can alos use the CSS to change the size.

<video width="200px" height="150px" controls>
  <source src="test.mp4" type="video/mp4">
</video>

Example:

<video style="width:500px;max-width:100%;" controls>
  <source src="https://tutorials.w3jar.com/wp-content/uploads/test.mp4" type="video/mp4">
</video>

How to embed PDFs & YouTube videos on HTML pages?

You can use the <iframe> to embed PDF and YouTube videos on an HTML page.

<iframe width="100%" height="500px"
src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
</iframe>

<iframe width="100%" height="400px" 
src="https://www.youtube.com/embed/FzG4uDgje3M">
</iframe>

How to enable YouTube full-screen mode on iframe?

To enable youtube full-screen mode on the iframe, you have to add the allowfullscreen attribute.

<iframe width="100%" height="400px" 
src="https://www.youtube.com/embed/FzG4uDgje3M"
allowfullscreen="true">
</iframe>

Ask Questions

Your email address will not be published. Required fields are marked *