CODEWITHSUNDEEP
htmlcss
KashyapVadi
KashyapVadi

Reputation: 505

Desktop View Diffrent Video And Mobile View Diffrent Video With Auto Play

Place help me... I will try to put the video on the desktop screen and this video width and height 100%. any user visits our site on desktop to see this video.

But open this page on the mobile view to change video. in mobile view different video play.

**Both Screen video autoplay **

Place help me how to possibly this.

**this is my code..**

<html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

open mobile view and desktop view plays different video and both autoplay.

Upvotes: 3

Views: 3082

Answers (2)

Dusin
Dusin

Reputation: 43

To play the video in mobile and desktop by giving a separate class

Like..

<video class="desktop" controls autoplay>
  <source src="Fumefx colored smoke.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video class="mobile" controls autoplay>
  <source src="mobile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

To us css to hide ad shoe...

.desktop{
    width:100%;
    height:100vh;
    display:block;
}
.mobile{
    display:none;
}
@media only screen and (max-width: 600px) {
    .desktop{
        display:none;
    }
    .mobile{
        width:100%;
        height:100vh;
        display:block;
    }
}

Upvotes: 3

Edwin Alwin
Edwin Alwin

Reputation: 217

For auto play video add an "autoplay" attribute on video tag.

To use different video in desktop and mobile. Use different video TAG with different source file and use media query or java script to hide and show

<html>
<head>
<title>video</title>
</head>
<body>

<video width="100%" height="100%" autoplay>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/howtorain.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
</body>
</html>

Upvotes: 0

Related Questions