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

user_8604216 0
Viewed 1083

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.

css html
2 Answers

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;
    }
}
user_144411090

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>

user_38409660
Related