i trying implement responsive, full-background video homepage of ror app.
currently, video showing big black blank screen in development. decided put video in 1 format (mp4) , throw vid.me rather go through s3 or aws.
is there wrong code or missing else?
thanks!
app/assets/stylesheets/custom.css.scss @import "bootstrap-sprockets"; @import "bootstrap"; /* mixins, variables, etc. */ $gray-medium-light: #eaeaea; /* universal */ body { padding-top: 60px; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; h1 { margin-bottom: 10px; } } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } @gray-light: #777; h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.5em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: $gray-light } p { font-size: 1.1em; line-height: 1.7em; } /* header */ #logo { float: left; margin-right: 10px; font-size: 1.7em; color: #f0f8ff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; &:hover { color: white; text-decoration: none; } } video { min-width: 100%; min-height: 100%; width: auto; height: auto; background: url(https://vid.me/e/4uis); background-size: cover; } /* footer */ footer { margin-top: 45px; padding-top: 5px; border-top: 1px solid $gray-medium-light; color: $gray-light; { color: $gray; &:hover { color: $gray-darker; } } small { float: left; } ul { float: right; list-style: none; li { float: left; margin-left: 15px; } } } app the code video file currenlty in application folder , not static_pages/home.html.erb file because shrinks when not in applicaiton.thml.erb reason:
app/views/application.html.erb <!doctype html> <html> <head> <title><%= full_title(yield(:title)) %></title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> <%= render 'layouts/shim' %> </head> <body> <video> <source src ="https://vid.me/e/4uis" type="video/mp4"/> </video> <%= render 'layouts/shim' %> <div class="container"> <%= yield %> <%= render 'layouts/footer' %> </div> </body> </html>
if you're using .scss, you'll far better going step , using sass:
#app/assets/stylesheets/custom.css.sass /* dependencies */ @import "bootstrap-sprockets" @import "bootstrap" /* vars */ $gray-light: #777 $gray-medium-light: #eaeaea /* universal */ body padding: top: 60px section overflow: auto textarea resize: vertical center text: align: center h1 margin: bottom: 10px /* type */ h1, h2, h3, h4, h5, h6 line: height: 1; h1 font: size: 3em letter: spacing: -2px margin: bottom: 30px text: align: center h2 font: size: 1.5em weight: normal letter: spacing: -1px margin: bottom: 30px text: align: center color: $gray-light p font: size: 1.1em line: height: 1.7em /* header */ #logo float: left; margin: right: 10px font: size: 1.7em weight: bold color: #f0f8ff text: transform: uppercase letter: spacing: -1px padding: top: 9px; &:hover color: white text: decoration: none video min: width: 100% height: 100% width: auto height: auto background: image: url(https://vid.me/e/4uis) size: cover /* footer */ footer margin: top: 45px padding: top: 5px border: top: 1px solid $gray-medium-light color: $gray-light; color: $gray &:hover color: $gray-darker small float: left ul float: right; list: style: none li float: left margin: left: 15px in regards actual problem, had read on see how works. seems there's more calling css background of video. html needs know if it's video or not...
here resources:
it seems bottom line have invoke video element html, using css style full-screen nature of it:
#source - http://codepen.io/mattgrosswork/pen/jrdwk <video autoplay loop id="video-background" muted> <source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-hd.mp4" type="video/mp4"> </video> #video-background { /* making video fullscreen */ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } --
so you, maybe this:
#app/views/layouts/application.html.erb <%= video_tag "https://vid.me/e/4uis", id:"video-background"%> #app/assets/stylesheets/application.js.erb #video-background { /* making video fullscreen */ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } 
Comments
Post a Comment