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
Related
Not sure how many people use it, but I noticed the only (free) choice for me to use videos from Azure Media Service is to use their own player. (and welcome suggestions for other players that works in variety of browsers)
However, I noticed some issues:
Following their examples (https://amp.azure.net/libs/amp/latest/docs/Samples.html, tried both JS and HTML5 versions), I noticed the page always show the ugly play button overlay -- Any way we can hide this play button or make it look better?
Also, looks like the video always default to 300x150px, even if I set the size for the Video tag. Any way I can make the video fit the width of its parent and resize when its parent resizes? (assuming we only have 16:9 videos, hopefully without using JS)
Thanks!
You can use just about any video player to play video from Azure Media Services. For example, I use VideoJS for my projects.
You simply change the src on the video player that you are using and have it point towards your videos stored in Azure. I wrote an in-depth series about the video player and how AMS works.
In terms of overriding their code, sure, you can apply different styles to the media player. In the debugger, check out which styles are currently applied to that class / ID, and make changes with your own CSS.
The JS will be obfuscated, however. Hopefully this helps!
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
For the gallery on my website I use media queries to readjust the image sizes depending on the screen width (I use the folio theme by galleria) and the image size is supposed to change when you tilt your phone - but that only happens after you reload it manually. (Adding orientation landscape or portrait doesn't do anything).
So basically, I want to avoid reloading the whole page because it involves reloading the images - the information is in the CSS file, can I reload that file individually?
Thanks a bunch!
Use e.g. jQuery mobile and catch orientationchange event.
$(window).bind('orientationchange', function(e) {
if(e.orientation === 'landscape'){
//edit you CSS
// or reload image
}else{
// roll back
}
});
All recent smartphone and tablet browsers definitely support media queries based on orientation, see article here. It is mentioned there that it is supported from iOS 4.0 upwards. If you scroll down the Bonus: iPhone support section it also provides a workaround for phones that are quirky about triggering automatically.
If you specify the media query as part of the CSS include it shouldn't be loaded until it becomes applicable, automatically solving your problem.
If you still run into platforms that have problems, you can use the Javascript onOrientationChange event as a fallback, using for example Mootools Utility/Asset to load images and stylesheets at runtime, or its jQuery counterpart.
Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.
So far so good. But these images still download on these devices, causing an increase in bandwidth.
What is the proper way to make these images not download on the specified devices?
Any response would be much appreciated!
Two options I can think of:
Detect small devices on the server using browser-sniffing, and send them different HTML that doesn’t reference the images.
Display the images via CSS instead of HTML (in style attributes if you like), using either background-image or :before/:after and content (not supported by IE 6 or 7), and wrap that CSS code in media queries so that it’s only displayed by devices with larger screens.
The only accessible solution right now is to wrap the image with <noscript> tags, then pull the image out later with javascript. Cookies don't work on first page load (HTMLPreloadScanner), nor with CDNs. Browser-sniffing is useless if your images aren't always 100% of the viewport.
Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.
The markup is pretty simple as well:
<noscript data-slimmage>
<img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>
Of course, you can make a server-side helper to even abstract this away.
If you don't mind a javascript dependency you could check window.innerWidth and insert image tags for sufficiently large screens.
Images would only be requested if javascript is enabled and the window big enough.
If you don't have any issues using additional JavaScript, then you may try THIS. I've stumbled upon it while searching and learning about media queries.
If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?
This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.
Yes, the entire page is downloaded (hidden elements and all). The display:none is meaningless until the page has been processed by the browser's CSS Engine.
There are several ways to stop an image being downloaded, wether the image is inline or is a background image within a CSS style, or wether it is being brought in through a media query. It works for nearly all mobile devices (except 'Fennec 10.0+' being the only device that still downloaded the image.- see Tim Kadle's test results)
Tim Kadlec's 'Media Query & Asset Downloading Test Results' research at:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
It says, for a background image, hide the parent element. If you can’t do that, then use a media query to set the background-image to only download when screen or device size is at certain size. Just define what you want hidden / to not download by putting inside media queries. Isn't it marvellous.
Also another brilliant test to use, so simple, at:
http://timkadlec.com/mq/test4.php
On this test you just resize your browser window to mimic wether 'desktop' or 'mobile' to see wether it is downloading images related to the media queries. You simply click the links for each scenario you want to test.