javascript - Fallback image for HTML5 video -

-

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

i'm trying set fallback image video banner. when site hits media query (mobile) i'd video become image, when refresh page i'm noticing class have giving dark grey background before video loads in. i'm thinking same image maybe present. want believe background-image set , when query hit maybe add display:none on video.

not sure if did correctly heres fiddle https://jsfiddle.net/8ucrarm0/

just in case that's terrible here's html/css:

html --> 

                    <div class="banner-text">                         <span class="logo-white"><img src="img/logo-white.svg" alt=""></span>                         <h1>feeling luxurious 1 car wash away.</h1>                         <h4>become diamond club member today.</h4>                             <button class="btn btn-primary btn-lg">see pricing</button>                     </div>                 </div><!-- end video-holder -->             </header>     </div><!--end banner-->

css:

#banner.container-fluid {     padding: 0;     position: relative; } #banner.overlay:after {     position: absolute;     content:" ";     top:0;     left:0;     width:100%;     height:100%;     display: block;     z-index:0;     background-color: rgba(0,0,0,0.8); } header {     position: relative;     overflow: hidden;     width:100vw;     height:100vh;     max-height:100vh;     text-align:center; } .banner-text {     position: relative;     top: 55%;     -webkit-transform: translatey(-50%);     -ms-transform: translatey(-50%);     -o-transform: translatey(-50%);     transform: translatey(-50%);     z-index: 1;     margin: 0 auto;     max-width: 550px;     /*left: 50%;*/     /*transform: translate(-50%, -50%);*/ } .banner-text h1, .banner-text h4 {     color: #fff; } .banner-text h1 {     padding-bottom: 20px; } .banner-text h4 {     padding-bottom: 40px; } .banner-text .logo-white {     width: 75px;     height: 65px;     display: block;     margin: 0 auto 20px auto; } .video-holder {     position:absolute;     height:100%;     width:200%;     left:-50%; } video {     position:absolute;     top: -99999px;     bottom: -99999px;     left: -99999px;     right: -99999px;     margin: auto;     min-height:100%;     min-width:50%; }

to fallback image html5 in mobile view.

you need use media queries.

css

@media screen , (max-width: 768px){   video{     display:none;   }     .full-img{     background: url('https://pbs.twimg.com/profile_images/686049493884665856/bw148x8r_400x400.jpg');     background-size: cover;   }

demo


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more