how to show video in html?

Today, We want to share with you how to show video in html.In this post we will show you how to insert a video in html from computer, hear for embed youtube video in html without iframe we will give you demo and example for implement.In this post, we will learn about How To Create a Fullscreen Video Background with an example.

video tag in html

The HTML <video> element is used to show a video on a web page.

Read Also:  how to insert/load mp4 video in html from computer?

HTML Video

Example 1: index.html

<!DOCTYPE html>
<html>
<body>

<video width="800" height="540" controls>
  <source src="tamilrokers.mp4" type="video/mp4">
  <source src="tamilrokers.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

HTML <video> Autoplay

Example 2: index.html

<!DOCTYPE html>
<html>
<body>

<video width="800" height="540" autoplay>
  <source src="tamilrokers.mp4" type="video/mp4">
  <source src="tamilrokers.ogg" type="video/ogg">
  sorry, dear Your browser does not support the video tag.
</video>

<p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>

</body>
</html>

HTML YouTube Videos

Example 1: index.html Playing a YouTube Video in HTML

<!DOCTYPE html>
<html>
<body>

<iframe width="520" height="655" src="https://www.youtube.com/embed/pakaInfo0075Yu">
</iframe>

</body>
</html>

YouTube Autoplay + Mute

<!DOCTYPE html>
<html>
<body>

<iframe width="520" height="655" src="https://www.youtube.com/embed/pakaInfo0075Yu?autoplay=1&mute=1">
</iframe>

</body>
</html>

YouTube – Loop

<!DOCTYPE html>
<html>
<body>

<iframe width="520" height="655" src="https://www.youtube.com/embed/pakaInfo0075Yu?playlist=pakaInfo0075Yu&loop=1">
</iframe>

</body>
</html>

YouTube – Controls

<!DOCTYPE html>
<html>
<body>

<iframe width="520" height="655" src="https://www.youtube.com/embed/pakaInfo0075Yu?controls=0">
</iframe>

</body>
</html>

I hope you get an idea about how to insert mp4 video in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.