All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

iframe Video Autoplay In HTML

Last Updated : Mar 11, 2024

iframe Video Autoplay In HTML

In this tutorial we will show you the solution of iframe video autoplay in HTML, in our previous session, we saw that how to embed a YouTube video in HTML now, our today’s topic is about how to embed a YouTube video in html file and make it auto play.

It means that when you open the required html codes on your browser then a video in iframe will automatically plays.

You also see many other online websites on internet in which video goes plays when you load the webpage on your computer, laptop and mobile device.

So, today we will show you that how you are able to auto play iframe video with the help of html.

Step By Step Guide On iframe Video Autoplay In HTML :-

Now, we think that you already know about iframe like what iframe is and how it is used, etc. So, today we starts our session by embedding a YouTube video in webpage and make it auto play.

For this, first you have to embed a YouTube video in iframe. And it can done when you paste the copied embed link of YouTube video in src attribute of iframe.

And the next process is given below. We hope that you understand the codes properly.

<!DOCTYPE html>
      <html>
        <head>
        <title>
            video
        </title>
    </head>
    <body>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> allow=”autoplay”</iframe>
    </body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Here, we create body tag, which is a paired tag. And all the contents that are being to be displayed on browser screen are written here.
  5. Here we paste the code that we copy from YouTube. For, this you have to search your required video in YouTube and then found a share option that is below of your video.
  6. After this click on it and click on embed option you will see a dialog box appears in which a link is written with iframe tag.
  7. You have to copy that code and have to paste in body of your html. You not have to create any iframe tag there just paste the copied data and add on ?autoplay=1 at the end of your video link that is in src attribute.
  8. If you don’t understand properly then just go to the example and see what we do there.
  9. And also if this code does not work, then you may also add allow=”autoplay” to the iframe tag, you can write this anywhere you want in iframe.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article you are able to auto play a YouTube video in html and also in iframe.

In next session, we also show you how you are able to make a video auto play with sounds. I hope this tutorial on iframe video autoplay in HTML helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪