CODEWITHSUNDEEP
reactjsvideonext.jstailwind-cssnext.js13
nelakay
nelakay

Reputation: 303

Next.js 13 - Video Tag not working on mobile

I am using Next 13 with the app directory, and I have a background video on the home screen. It plays well on desktop, but on mobile browsers, the video doesn't play. On the computer it works at any size, even when shrinking down the browser, but on mobile, I am having issues playing the video in all browsers I have tried (Brave, Firefox Focus, Red Browser, Neeva and Safari) Instead of playing the video, the browser stays on the first frame.

The code looks like this:

export default async function Page() {
  return (
    <section className="relative h-screen flex flex-col items-center justify-center text-center bg-ac_color-dark text-ac_color-lightgold py-0 px-3">
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
      <video
          className="min-w-full h-[90vh] absolute object-cover z-2 opacity-50"
          src="/ac_movie.mp4"
          autoPlay
          muted
          loop
        >
        </video>
        
      </div>
    </section>
    );
}

Any ideas as to what I am doing wrong?

Upvotes: 3

Views: 6813

Answers (3)

heff
heff

Reputation: 3239

You're missing the playsInline attribute on the video tag, which will allow it to play on mobile without going to fullscreen.

      <video
          src="..."
          autoPlay
          muted
          loop
          playsInline
        >
        </video>

You can read about the policy here.

Upvotes: 0

Yilmaz
Yilmaz

Reputation: 49341

I had the same issue with this code:

<video
          
        controls
        width="250"
        className="w-2/3 h-full aspect-square object-cover rounded-xl "
    >
          <source src={product.video} type="video/webm" />
  </video>

I served the videos from cloudinary which stores the videos in mp4 format. so i changed the type and it works now:

  <source src={product.video} type="video/mp4" />

Upvotes: 0

Damilola
Damilola

Reputation: 17

For the video tag, the source is added with the source tag e.g

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

You can read more about it on MDN

Upvotes: -1

Related Questions