CODEWITHSUNDEEP
htmlcss
Rohan Zakie
Rohan Zakie

Reputation: 319

Hide a video div in mobile

I have an html page that has a video within div:

HTML

<div class="news">
    <h3 class="highlight">Kate's 1 Month Transformation</h3>
    <div class="clr"></div>
    <center>
        <video controls="" autoplay="" poster="assets/4/vid.png.html">
            <source src="https://globalskincr.files.wordpress.com/2015/05/wrinkle_vid.mp4" type="video/mp4">
        </video>
    </center>
</div>

I can't disable the video and hide the div in mobile,

CSS

 .news {
     display:none;
 }

This code hides the video but the sound continues.

Upvotes: 0

Views: 3225

Answers (3)

annieXo
annieXo

Reputation: 156

"display:none" only makes the video hidden, it doesn't actually remove it from the page, and you have it on autoplay which is why you hear sound although it is not visible.

Do you need the video to autoplay? You haven't defined that attribute. If you remove the autoplay attribute from the VIDEO tag, then your CSS "display:none" solution will be sufficient.

If you DO need it to auto-play, then a CSS solution won't be sufficient. You could use jQuery to remove the "autoplay" attribute from the VIDEO tag only when the page is viewed on mobile.

Upvotes: 2

Shepherd
Shepherd

Reputation: 89

Adding to Zorak's answer

@media screen and (max-device-width: 480px) and (orientation: portrait){
  video {
    display:none
    }
}

Upvotes: 1

Zorak
Zorak

Reputation: 709

there is no native 100% working solution across all devices. This can be used as CSS

@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

BUT .... todays resolutions of mobile displays is much higher, sometimes could be maybe the same in landscape mode as some of smaller notebooks. Also this approach requires to set portrait or landscape.

Maybe you can find a better solution here What is the best way to detect a mobile device in jQuery?

apply the IF suggested in accpeted reply of topic, and if it is true (it is a mobile device, simply add $(".news").css("display","none");

Upvotes: 2

Related Questions