与Androids本机视频全屏问题

时间：2017-03-15 13:29:08

标签： html5 css3

我正在使用来自Vimeo的嵌入视频创建一个非常简单的网站。但是，在使用Android设备播放视频时，它似乎以全屏方式启动。如果不是我以前的内容仍然显示在内容之上，那就没关系。我尝试了很多种z-index修复，没有任何运气。任何对此问题有明智解决方案的人？这是代码：

＆＃13;
＆＃13; 
html{
  height: 100%;
  width: 100%;
}

body {
  /*background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);*/
  background-attachment: fixed;
  /*background-image: url(../img/bg.jpg);*/
  font-family: 'Montserrat', sans-serif;
  padding: 3rem;
  height: 100%;
  background: black;

  /*background-size: 10000px 100%;*/
  /*animation: bg 150s linear infinite;*/
}

/*@keyframes bg {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}*/

#logo{
  max-width: 400px;
  margin-bottom: 50px;
  opacity: .9;
  animation: logo 500ms ease-in-out both;
  animation-delay: 300ms;

}

.tc{
  text-align: center;
}

#content{
  /*padding: 20px;*/
  margin:0 -10px;
  max-width: 1200px;
  margin: 0 auto;
}


ul{
  margin:0;
  padding: 0;
  /*display: flex;
  justify-content: space-around;
  flex-direction: column;*/
}

li{
  list-style: none;
  background: white;
  /*padding: 10px;*/
  display: inline-block;
  transition: all 300ms ease;
  text-align: center;
  margin: 20px;
  width: 300px;
  /*height: 565px;*/
  /*flex-basis:300px;*/
  flex-wrap: nowrap;
}

h2{
  font-size: 35px;
  margin: 20px 0 20px;
  color:#333;
}

li img{
  width: 100%;
  vertical-align: middle;
}

li:hover{
  /*box-shadow: 0 0 15px rgba(0,0,0,.4);*/
  filter:saturate(.2);
}

.links{
  display: flex;
  justify-content: space-around;
}

.links img{
  width: 30px;
  margin: 25px 0 20px;
  opacity: .6;
}
.links .apple{
    margin-top: 20px
}

.links img:hover{
  opacity: .8;
}

/*@media all and (max-width: 9500px) and (min-width: 2000px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 5 - 20px);
  }
}*/

/*@media all and (max-width: 1999px) and (min-width: 1400px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 5 - 20px);
  }
  h2{
    font-size: 28px;
  }
}*/

@media all and (max-width: 9999px) and (min-width: 959px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }

  li:nth-child(4),li:nth-child(5){
    width: calc(100% * 1 / 2 - 20px);
  }
  h2{
    font-size: 28px;
  }
}


@media all and (max-width: 960px) and (min-width: 769px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 2 - 20px);
  }

  li:nth-child(5){
    width: calc(100% * 1 / 1 - 20px);
  }
  h2{
    font-size: 28px;
  }
}

@media all and (max-width: 770px) and (min-width: 1px){
  body{padding: .5rem;}
  #logo{width: 80%;margin-top: 30px;}

  .videoWrapper{
    margin: 0!important;
    padding-top: 0!important;
  }

  li{
    float: left;
    margin: 10px 10px 20px 10px;
    width: calc(100% * 1 / 1 - 20px);
  }

  h2{
    font-size: 28px;
  }
}

/*@media all and (max-width: 3500px) and (min-width: 1px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }
}

@media all and (max-width: 3500px) and (min-width: 1px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }
}*/



#video{
  animation: fadeIn 500ms ease-in-out both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
  margin: 50px 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 20px);
	height: 100%;
  margin: 0 10px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#contact{
  background: white;
  margin: 50px 10px;;
  float: left;
  width: calc(100% - 20px);
  text-align: center;
  padding: 25px 0;
}

h1{
  font-size: 16px;

}

#contact img{
  width: 150px;
  height: 150px;
  border-radius:50%;
}

.name{
  font-size: 36px;
  margin-bottom: 0;
  margin-top: 10px;
}

.subtitle{
  font-size: 16px;
  margin-top: 0;
  color:#777;
}

.mail{
  font-size: 16px;
}

a{color:#333;text-decoration: none;}



li{
  animation: ar 500ms ease-in-out both;
  animation-delay: 500ms;
}

  li:nth-child(2){
  animation-delay: 550ms;
}
  li:nth-child(3){
  animation-delay: 600ms;
}
  li:nth-child(4){
  animation-delay: 650ms;
}
  li:nth-child(5){
  animation-delay: 700ms;
}


@keyframes ar {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0%, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes logo {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0%, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
＆＃13; 
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>COPENHAGEN RECORDS S/S 2017 COLLECTION
</title>
  <meta name="description" content="COPENHAGEN RECORDS S/S 2017 COLLECTION">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>


<div id="content">

<div class="tc">
  <img id="logo" src="http://mortenhjort.dk/cphrec/img/logowhite.svg">
</div>

<div id="video">
  <div class="videoWrapper">
      <iframe src="https://player.vimeo.com/video/208457219" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>


<ul>
  <li>
    <h2>Alex Vargas</h2>
    <img src="http://mortenhjort.dk/cphrec/img/vargas.jpg">
    <div class="links">
      <a href="http://www.facebook.com/alexvargasofficial"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="http://www.instagram.com/alexvargasmusic"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/alexvargasofficial"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/3kdU3J8t1HUPZqFyScP8SF"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/alex-vargas/id207308428"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Maximillian</h2>
    <img src="http://mortenhjort.dk/cphrec/img/maximillian.jpg">
    <div class="links">
      <a href="https://www.facebook.com/maximillianmusic"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/maximillian_rasmussen/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/channel/UC0CgEdC-nJuh4FR6QJdo_1A"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <!-- <a href="#"><img src="img/spotify.svg"></a>
      <a href="#"><img class="apple" src="img/apple.svg"></a> -->
    </div>
  </li>

  <li>
    <h2>SAVEUS</h2>
    <img src="http://mortenhjort.dk/cphrec/img/saveus.jpg">
    <div class="links">
      <a href="https://www.facebook.com/saveusofficial/"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/saveus/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/saveusVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/2rR0cafJvL0JVTC8E2qIqt"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/saveus/id961149212?l=da"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Hedegaard</h2>
    <img src="http://mortenhjort.dk/cphrec/img/hedegaard.jpg">
    <div class="links">
      <a href="https://www.facebook.com/DJHEDEGAARD"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/Hedegaarddk/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/HedegaardVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/2ZuweXv0TkfsidZOLZZoM2 "><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/hedegaard/id406495070?l=das"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Scarlet Pleasure</h2>
    <img src="http://mortenhjort.dk/cphrec/img/scarlet.jpg">
    <div class="links">
      <a href="https://www.facebook.com/scarletpleasure/"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/Scarletpleasure/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/ScarletPleasureVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href=" https://play.spotify.com/artist/7wrulS1dfanckBnoxxEuS6?play=true&utm_source=open.spotify.com&utm_medium=open"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/scarlet-pleasure/id823560885?l=da"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

</ul>




<div id="contact">
<h1>For more details please contact Copenhagen Records</h1>
<!-- <img src="img/torben.jpg"> -->
<p class="name">Torben Ravn</p>
<p class="subtitle">Managing Director</p>
<a href="mailto:torben@copenhagenrecords.dk"><p class="mail">Mail: torben@copenhagenrecords.dk</p></a>

</div>







</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

试用此代码

＆＃13;
＆＃13; 
html{
  height: 100%;
  width: 100%;
}

body {
  /*background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);*/
  background-attachment: fixed;
  /*background-image: url(../img/bg.jpg);*/
  font-family: 'Montserrat', sans-serif;
  padding: 3rem;
  height: 100%;
  background: black;

  /*background-size: 10000px 100%;*/
  /*animation: bg 150s linear infinite;*/
}

/*@keyframes bg {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}*/

#logo{
  max-width: 400px;
  margin-bottom: 50px;
  opacity: .9;
  animation: logo 500ms ease-in-out both;
  animation-delay: 300ms;

}

.tc{
  text-align: center;
}

#content{
  /*padding: 20px;*/
  margin:0 -10px;
  max-width: 1200px;
  margin: 0 auto;
}


ul{
  margin:0;
  padding: 0;
  /*display: flex;
  justify-content: space-around;
  flex-direction: column;*/
}

li{
  list-style: none;
  background: white;
  /*padding: 10px;*/
  display: inline-block;
  transition: all 300ms ease;
  text-align: center;
  margin: 20px;
  width: 300px;
  /*height: 565px;*/
  /*flex-basis:300px;*/
  flex-wrap: nowrap;
}

h2{
  font-size: 35px;
  margin: 20px 0 20px;
  color:#333;
}

li img{
  width: 100%;
  vertical-align: middle;
}

li:hover{
  /*box-shadow: 0 0 15px rgba(0,0,0,.4);*/
  filter:saturate(.2);
}

.links{
  display: flex;
  justify-content: space-around;
}

.links img{
  width: 30px;
  margin: 25px 0 20px;
  opacity: .6;
}
.links .apple{
    margin-top: 20px
}

.links img:hover{
  opacity: .8;
}

/*@media all and (max-width: 9500px) and (min-width: 2000px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 5 - 20px);
  }
}*/

/*@media all and (max-width: 1999px) and (min-width: 1400px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 5 - 20px);
  }
  h2{
    font-size: 28px;
  }
}*/

@media all and (max-width: 9999px) and (min-width: 959px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }

  li:nth-child(4),li:nth-child(5){
    width: calc(100% * 1 / 2 - 20px);
  }
  h2{
    font-size: 28px;
  }
}


@media all and (max-width: 960px) and (min-width: 769px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 2 - 20px);
  }

  li:nth-child(5){
    width: calc(100% * 1 / 1 - 20px);
  }
  h2{
    font-size: 28px;
  }
}

@media all and (max-width: 770px) and (min-width: 1px){
  body{padding: .5rem;}
  #logo{width: 80%;margin-top: 30px;}

  .videoWrapper{
    margin: 0!important;
    padding-top: 0!important;
  }

  li{
    float: left;
    margin: 10px 10px 20px 10px;
    width: calc(100% * 1 / 1 - 20px);
  }

  h2{
    font-size: 28px;
  }
}

/*@media all and (max-width: 3500px) and (min-width: 1px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }
}

@media all and (max-width: 3500px) and (min-width: 1px){
  li{
    float: left;
    margin: 10px;
    width: calc(100% * 1 / 3 - 20px);
  }
}*/



#video{
  animation: fadeIn 500ms ease-in-out both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
  margin: 50px 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 20px);
	height: 100%;
  margin: 0 10px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#contact{
  background: white;
  margin: 50px 10px;;
  float: left;
  width: calc(100% - 20px);
  text-align: center;
  padding: 25px 0;
}

h1{
  font-size: 16px;

}

#contact img{
  width: 150px;
  height: 150px;
  border-radius:50%;
}

.name{
  font-size: 36px;
  margin-bottom: 0;
  margin-top: 10px;
}

.subtitle{
  font-size: 16px;
  margin-top: 0;
  color:#777;
}

.mail{
  font-size: 16px;
}

a{color:#333;text-decoration: none;}



li{
  animation: ar 500ms ease-in-out both;
  animation-delay: 500ms;
}

  li:nth-child(2){
  animation-delay: 550ms;
}
  li:nth-child(3){
  animation-delay: 600ms;
}
  li:nth-child(4){
  animation-delay: 650ms;
}
  li:nth-child(5){
  animation-delay: 700ms;
}


@keyframes ar {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0%, 50%, 0);
    transform: translate3d(0, 50%, 0);
}

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes logo {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0%, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
＆＃13; 
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>COPENHAGEN RECORDS S/S 2017 COLLECTION
</title>
  <meta name="description" content="COPENHAGEN RECORDS S/S 2017 COLLECTION">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>


<div id="content">

<div class="tc">
  <img id="logo" src="http://mortenhjort.dk/cphrec/img/logowhite.svg">
</div>

<div id="video">
  <div class="videoWrapper">
	<iframe src="https://player.vimeo.com/video/208457219" width="640" height="360" frameborder="0"></iframe>  </div>
</div>


<ul>
  <li>
    <h2>Alex Vargas</h2>
    <img src="http://mortenhjort.dk/cphrec/img/vargas.jpg">
    <div class="links">
      <a href="http://www.facebook.com/alexvargasofficial"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="http://www.instagram.com/alexvargasmusic"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/alexvargasofficial"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/3kdU3J8t1HUPZqFyScP8SF"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/alex-vargas/id207308428"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Maximillian</h2>
    <img src="http://mortenhjort.dk/cphrec/img/maximillian.jpg">
    <div class="links">
      <a href="https://www.facebook.com/maximillianmusic"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/maximillian_rasmussen/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/channel/UC0CgEdC-nJuh4FR6QJdo_1A"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <!-- <a href="#"><img src="img/spotify.svg"></a>
      <a href="#"><img class="apple" src="img/apple.svg"></a> -->
    </div>
  </li>

  <li>
    <h2>SAVEUS</h2>
    <img src="http://mortenhjort.dk/cphrec/img/saveus.jpg">
    <div class="links">
      <a href="https://www.facebook.com/saveusofficial/"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/saveus/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/saveusVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/2rR0cafJvL0JVTC8E2qIqt"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/saveus/id961149212?l=da"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Hedegaard</h2>
    <img src="http://mortenhjort.dk/cphrec/img/hedegaard.jpg">
    <div class="links">
      <a href="https://www.facebook.com/DJHEDEGAARD"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/Hedegaarddk/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/HedegaardVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href="https://open.spotify.com/artist/2ZuweXv0TkfsidZOLZZoM2 "><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/hedegaard/id406495070?l=das"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

  <li>
    <h2>Scarlet Pleasure</h2>
    <img src="http://mortenhjort.dk/cphrec/img/scarlet.jpg">
    <div class="links">
      <a href="https://www.facebook.com/scarletpleasure/"><img src="http://mortenhjort.dk/cphrec/img/facebook.svg"> </a>
      <a href="https://www.instagram.com/Scarletpleasure/"><img src="http://mortenhjort.dk/cphrec/img/instagram.svg"></a>
      <a href="https://www.youtube.com/user/ScarletPleasureVEVO"><img src="http://mortenhjort.dk/cphrec/img/youtube.svg"></a>
      <a href=" https://play.spotify.com/artist/7wrulS1dfanckBnoxxEuS6?play=true&utm_source=open.spotify.com&utm_medium=open"><img src="http://mortenhjort.dk/cphrec/img/spotify.svg"></a>
      <a href="https://itunes.apple.com/dk/artist/scarlet-pleasure/id823560885?l=da"><img class="apple" src="http://mortenhjort.dk/cphrec/img/apple.svg"></a>
    </div>
  </li>

</ul>




<div id="contact">
<h1>For more details please contact Copenhagen Records</h1>
<!-- <img src="img/torben.jpg"> -->
<p class="name">Torben Ravn</p>
<p class="subtitle">Managing Director</p>
<a href="mailto:torben@copenhagenrecords.dk"><p class="mail">Mail: torben@copenhagenrecords.dk</p></a>

</div>







</div>


</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题