Question

我计划我的网站，我希望有一个全屏视频背景循环。

我想实现类似的东西：

http://theme.stepofweb.com/Smarty/v1.2.1/HTML/index-fullscreen-local-video.html http://theme.stepofweb.com/Smarty/v1.2.1/HTML/index-fullscreen-youtube.html

正如您在将浏览器窗口调整为移动屏幕大小时所看到的那样， Youtube-Variant将视频置于移动大小的窗口中。但是本地视频变体没有，它只是将左侧部分保留在屏幕上。

我想使用类似本地变体的东西，因为它加载得更快但想编辑css文件，以使视频居中。有机会吗？

你们有什么方法可以帮助我，我如何将视频置于本地变体中心？

Answer 1

全屏HTML5视频背景.....

＆＃13;

video#videobg {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('images/poster.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}


/* ----------------------------------------------------
	GOOGLE FONTS
-------------------------------------------------------
font-family: 'Raleway', sans-serif;
font-family: "PT Sans",sans-serif;
font-family: 'Lato', Arial, sans-serif;
------------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* ----------------------------------------------------
	FONTS AWESOME
-------------------------------------------------------*/

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}


/* ----------------------------------------------------
	STYLING
-------------------------------------------------------*/

.container>header,
.codeconvey-top {
  font-family: 'Lato', Arial, sans-serif;
}

.container>header {
  bottom: 0;
  color: #fff;
  margin: 0 auto;
  padding: 2em;
  position: absolute;
  text-align: center;
  width: 95%;
}

.container>header h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  color: #f0f21e;
}

.container>header span {
  display: block;
  font-size: 60%;
  color: #ceccc6;
  padding: 0 0 0.6em 0.1em;
}


/* To Navigation Style */

.codeconvey-top {
  font-size: 0.69em;
  line-height: 2.2;
  margin: 0 auto;
  padding: 0;
  text-transform: uppercase;
  width: 100%;
}

.codeconvey-top a {
  color: #f0f21e;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 15px 25px;
  text-decoration: none;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  transition: .6s background;
}

.codeconvey-top a:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #716d62;
}

.codeconvey-top span.right {
  float: right;
}

.codeconvey-top span.right a {
  float: left;
  display: block;
}

.container>section {
  margin: 0 auto;
  padding: 10em 3em;
  text-align: center;
}

.color-1 {
  background: #435a6b;
}

.color-2 {
  background: #f39c12;
}

.color-3 {
  background: #2ac56c;
}

.color-4 {
  background: #0e83cd;
}

.color-5 {
  background: #cd4436;
}

.color-6 {
  background: #f19f0f;
}

.color-7 {
  background: #3fa46a;
}

.color-8 {
  background: #ecf0f1;
}

.color-9 {
  background: #9e487f;
}

.color-10 {
  background: #16a085;
}

.color-11 {
  background: #aab7b7;
}

@media screen and (max-width: 25em) {
  .codeconvey-icon span {
    display: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <!-- Top Navigation -->
  <div class="codeconvey-top clearfix">
    
   
  </div>
  <header>
    

  <video autoplay poster="images/poster.jpg" id="videobg" loop>
   <source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4'/>
         
  </video>
</div>

＆＃13;

HTML5背景视频不以移动为中心

1 个答案:

全屏HTML5视频背景.....