<pre><code class="lang-javascript">&lt;div className="ratio ratio-16x9"&gt;
 &lt;video width="900" height="650" muted playsInline autoPlay loop&gt;
 &lt;source src="/images/test.mp4" type="video/mp4" /&gt;
 &lt;/video&gt;
&lt;/div&gt;
</code></pre>

```javascript
<div className="ratio ratio-16x9">
 <video width="900" height="650" muted playsInline autoPlay loop>
 <source src="/images/test.mp4" type="video/mp4" />
 </video>
</div>
```

When using the autoPlay, include the muted attribute to ensure the video plays automatically, plus playsInline attribute for compatibility with iOS devices.

Add responsive video to Nextjs using Bootstrap5

Full Stack Developer with a passion for building web applications. PHP, Node.js, Laravel, ExpressJS, MySQL, MongoDB. Love collaborating & making a difference


Build Innovative Digital Solutions using PHP, Laravel, NodeJS, ExpressJS, ReactJS, Livewire, Tailwind CSS, Bootstrap, REST, GraphQL

Raja Muhammad Asher

Raja Muhammad Asher

Add responsive video to Nextjs using Bootstrap5