Change background VIDEO by screen size?

Asked

Viewed 58 times

-1

How to use different background video by screen size , Desktop would be a <video> Mobile would be another <video>

Design in Angular ..

<video playsinline="playsinline" autoplay="autoplay" loop">
      <source src="../assets/HomeBack.mp4" type="video/mp4" >
    </video>

<video playsinline="playsinlineMobile" autoplay="autoplay" loop">
      <source src="../assets/HomeBackMobile.mp4" type="video/mp4" >
    </video>

css html5 typescript scss

2 answers

2

Man you can have a simple @media to show one and hide the other.

inserir a descrição da imagem aqui

.mobile {
    display: none;
}

@media (max-width:768px) {

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

}
<video class="desktop" width="400" nocontrols autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video class="mobile" width="400" nocontrols autoplay muted>
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

-2

You can be using css media queries. Example:

.teste {
    margin-left: 0px;
}
@media (min-width: 992px) {
   .teste {
     margin-left: -211px;
   }
}

Browser other questions tagged css html5 typescript scss

You are not signed in. Login or sign up in order to post.