CODEWITHSUNDEEP
htmlcssmedia-queries
Ken Saluda
Ken Saluda

Reputation: 31

Can't hide html5 video in mobile by media query

I fail to hide video in mobile devise, I look through many post and tried many time, but still can't use @media to hide the video, and display an image instead. Below is my html file and css:

HTML

   <div class="container">
    <div class="logo">
      <h1>Name</h1>
      <hr>
      <h2>address</h2>
        <h3>City</h3>
        <h3>email</h3>
        <p>Personal Experience</p>
        <div class="vdo">
          <video src="####" autoplay muted loop>
        </div>
    </div>
  </div>

CSS

@media only screen and (max-width: 767px) {
.container {
  background: url('hero.jpg') center center cover no-repeat;
}

.vdo {
  display: none;
}
}

Can someone help me out, thank you

Upvotes: 1

Views: 3402

Answers (3)

Dino
Dino

Reputation: 806

You can use. 

.vdo {
   display: none !important;
   visibility : hidden !important;
}

But display: none !important;alone is working successfully in my PC

NOTE : May be the problem is with your tags. Double check if there is any tags that is not closed. Clear you browser cache also .

Upvotes: 2

Rahul Prajapati
Rahul Prajapati

Reputation: 202

Try this:

@media (max-width: 767px)
{
    .vdo video
      {
        display:none !important;
      }
}

Upvotes: 1

S Rox
S Rox

Reputation: 69

You can try this

@media (max-width:767px){
.vdo{
display:none !important;
}
}

Upvotes: 0

Related Questions