0

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.

Alex McMillan
  • 13,847
  • 6
  • 47
  • 76
Rohan Zakie
  • 319
  • 4
  • 14

3 Answers3

2

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");

Community
  • 1
  • 1
Zorak
  • 629
  • 7
  • 23
  • How does this answer the question? The original question already notes that applying "display: none" in mobile does not solve the problem. This only makes the video invisible but still present on the page, so the audio continues. It sounds like the desired outcome is to completely remove/disable the video on mobile. – annieXo Mar 12 '16 at 05:38
2

"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.

annieXo
  • 156
  • 8
1

Adding to Zorak's answer

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