Question

我正在尝试为我的RoR应用的主页实现响应式全背景视频。

目前，该视频刚刚在开发中显示为一个黑色的大黑屏。我决定只将视频放在一种格式（mp4）中并将其投放到vid.me而不是通过S3或AWS。

我的代码有什么问题或者我错过了其他的东西吗？

谢谢！

 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;
        a {
         color: $gray;
        &:hover {
        color: $gray-darker;
          }
      }


       small {
       float: left;
     }

       ul {
           float: right;
           list-style: none;
           li {
              float: left;
              margin-left: 15px;
          }
       }
   }


     app

视频文件的代码当前在应用程序文件夹中，而不是static_pages / home.html.erb文件，因为它因为某些原因而不在applicaiton.thml.erb中时缩小：

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>

Answer 1

如果您正在使用.scss，那么您可以更好地采取额外步骤并使用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;
    a
     color: $gray
    &:hover
       color: $gray-darker


   small
     float: left

   ul
       float: right;
       list:
         style: none
       li
          float: left
          margin:
            left: 15px

关于你的实际问题，我不得不阅读它以了解它是如何工作的。似乎除了调用视频的CSS背景之外还有更多内容。 HTML需要知道它是否是视频......

以下是一些资源：

似乎最重要的是你必须将video元素调用到HTML中，使用CSS来设置它的全屏特性：

#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 the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

-

所以对你来说，也许是这样的：

#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 the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

如何在RoR应用程序中调试背景视频的HTML5 / CSS

1 个答案: