Note about the status of ‘206’ - this is different than your usual status 200 when an asset successfully downloads. Uncheck ‘disable cache’ and then check out the performance. However, most civilians don’t have their cache disabled. In which case, yes, every time the video loops, your browser will re-download the video. Odds are, if you have your dev tools open, you probably have ‘disable cache’ checked. That’s when you might have a coronary: 18MB for single page? What’s going on here?!? The video seems to be downloading over and over! You’re a conscientious web person: one of the things you’re probably going to do while implementing this is to check your browser’s development tools to see the performance impact. If it still isn’t working for you, try tacking on !important. Video :: -webkit-media-controls-start-playback-button Here is the CSS that you can add that will hide the icon: However, since we are dealing with a background element, we don’t want this icon to appear. Since the two most popular mobile operating systems will not autoplay a video, they add a play icon so that a user can initiate the video.
iOS (and recent versions of Android) will not autoplay a video 1, so the poster will act as a background image. This is an instance where you’ll want to choose a reasonable ‘middle of the road’ image size that looks okay across the most breakpoints and screen resolutions.ĭo not omit the poster image. However, do include one default image path or you’ll likely see a flash of an empty box. You can, if you want, dynamically swap images based on breakpoint size with javascript. The user will likely see the poster image before the video starts. If you have control over it, make the poster image match the first frame of the video.
This has some performance implications - more on that in a bitĪ crucial part of your implementation of a video background will be the poster image that you give to your video. loop="loop" will, well, cause the video to loop.Note the omission of the controls attribute - if you don’t want users seeing the controls or pausing the video, simply leave it out.You’re adding a decorative element - no one wants to hear it. For the love of all things good in this world, include the muted attribute: muted="muted".Some notes on the attributes of this tag:
0 kommentar(er)
