I am using youtube videos on a website here
I have set a video to autoplay on home page. And In responsive mobile version (below resolution 767px) I hide the video using css display none. But video is still playing in the backend.
I did all this because I want to change the position of video in mobile version , so I hide the right sidebar video in mobile version and display the left side video.
Now I want to stop the video in mobile version when it is hide. But the video is still playing even when it is hidden using css. I know css can not stop iframe autoplay.
Is there any method which can relate the autoplay of youtube video depending upon the resolutions of the screen. So that we can play and stop the video as per the resolutions of the screen.
Just Use Javascript to load the youtube video embed url as per the screen resolution dynamically, instead of using a static video url
This link may help to detect Screen Resolution.
If you feel the Screen Size is small , just remove youtube autoplay parameter from the url
EDIT: Check this url for Dynamic screen size handling
Related
I'm having this issue on mobile where the video scales to full screen after the page loads, and then I have to swipe it away to see the website. I'm using this as an example but my code is similar: https://qdync.csb.app/ (based on this repo: https://github.com/SmashTapsOS/reactjs-videobg)
For my code, I used styled components and this is what the index.js code snippet looks like for the video background:
<HeroBackground>
<VideoBackground
autoPlay
loop
muted
src={Video}
type='video/mp4'
allowFullScreen
allowfullscreen='true'
playsInLine
controls={false}
>
</VideoBackground>
</HeroBackground>
However, when the page loads on mobile, the video jumps to the front and goes full screen on my phone (as if it was a Netflix video), rather than having the image of the video show as the background image on mobile.
There is a GitHub post about this where you need autoPlay loop muted playsInLine for this to work: Adding a background video with React?
Any ideas how to get this to not jump into full screen mode on mobile? It's 1000% perfect on desktop (non-mobile) version, however. It's just that pesky mobile version that's messing up the video.
You can add style={{ WebkitMediaControls: 'display(none)' }}
I am using iframe to embed a facebook video. I have changed show_text to "true" to include the description from facebook, and increased the height to around 600px to allow space for it. It works great on larger screens and even shows up when previewing in mobile responsive mode on my laptop, but the description and like/comment/share icons are missing when viewed on my phone. The video is still there but no information. Hoping someone has some ideas about this. Thanks!
https://developers.facebook.com/docs/plugins/embedded-video-player/#settings:
data-show-text
Set to true to include the text from the Facebook post associated with the video, if any. Only available for desktop sites.
So this isn't supposed to work on mobile.
I want to hide a video on mobile devices.
I did this by using "#media screen and (max-width: ###px)" and "display:none", this works fine but does that prevent the video from being loaded?
Basically I want the video to be not loaded with mobile data roaming, so that users on mobile devices won't use their roaming data for that.
Is there a more convenient way of doing this?
If you are asking about the css display: none then the answer is the video will still be loaded over the mobile network but it would not be visible to the end user. That being said a user could theoretically change the CSS for that element so it would display and then they could watch the video.
Video will be loaded but it is not visible to user. To pervent loading video, instead of changing css, you can remove the video from HTML using JS
I'd like to display a video on my WordPress site in between content, and I'd like that video to take up the full page width, and a fixed height. It's ok that the videos scales and crops as-needed.
I'd also prefer to stream it from YouTube, Vimeo, etc, as the site's performance is somewhat hindered when the video is self-hosted.
Have gotten closest to desired result using the YouTube IFrame player API. The actual container behaves the way I'd like, however the as soon as the video is played, the black bars appear on each side to maintain the video's aspect ratio.
Open to plug-ins and such.
Any guidance would be very much appreciated.
ARVE is a very popular and powerful plugin to display YouTube, Vimeo videos full screen. It uses shortcodes to display videos in posts.
I`m use background video in fullscreen on my website. When screen width is smaller than 1200px, I hide video tag using display:none and display picture. But video still continue download, spending mobile traffic. So how i can stop downloading this video on mobile devices using css.