i want to stop loading a video when the website is being displayed on a phone but it should load on desktop screen sizes.

P.s. - i am talking about loading/not-loading an element or component. please don't give answers by telling to change the css property (display: none, visibility: hidden).

i am using an Iphone and with display: none, the video is not showing. However, the video is autoplayed while scrolling and plays randomly in the video player of safari.

CodePudding user response：

You can directly apply the CSS to that particular HTML element using @media queries on the screen width, like below.

@media screen and (max-width: 480px) {
  body {
    background-color: red;
  }
}

For reference - Media Queries

For stopping actions in the React code, you can use innerWidth property from the window object.

CodePudding user response：

You can try to track the width of device, and depending on it just conditionally render component with video.

CodePudding user response：

display: none and visibility: hidden have no impact on page load time. If you want to wait to load the content until it's needed, don't include the video HTML component at all until you know the width the width of the device is bigger than 940

const renderVideo = () => {  
    const {innerWidth} = window;
    return (innerWidth > 940 && <video ..../>
}