¿Cómo crear un fondo de video en pantalla completa con AMP?

Aprenda a crear un fondo de video de pantalla completa con Amp. Learn how to create a full screen video background with AMP.

Video Tutorial

Vamos a utilizar Amp y Youtube para que muestre el video de una forma fácil y segura, también mostrara un título y una descripción con unos simples pasos.

Paso 1) Agregar los componentes:

Ejemplo

<script async src='https://cdn.ampproject.org/v0.js'/>
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>

Paso 2) Agregar el CSS

Ejemplo

section {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Video */

.box-video{
    position: relative;
    height: 802px;
}

.opacity-video{
    position: relative;
    background: #222;
    overflow: hidden;
}
.opacity-video:before {
    content: &#39; &#39;;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: rgb(40, 50, 78)
}

.box-video-container {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    -webkit-transform: translate3d(-50%,-50%,0);
    z-index: 4;
}

.box-video-relative {
    color: #fff;
    position: relative;
}

.box-video-txt {
    font-size: 46px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 50px;
    margin: -18px 0 1px 0;
    padding-bottom: 41px;
    position: relative;
    top: 8px;
    text-align: center;
    color: #fff;
}
.box-video-subtext {
    font-size: 21px;
    line-height: 29px;
    margin: -32px 0 3px 0;
    padding: 0 0 41px 0;
    position: relative;
    top: 6px;
    text-align: center;
}

@media only screen and (max-width: 1024px) {
.box-video {
    height: 567px;
}

  }
@media only screen and (max-width: 1006px){
.box-video {
    height: 214px;
}
.box-video-container {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    -webkit-transform: translate3d(-50%,-50%,0);
    z-index: 4;
    width: 100%;
}
.box-video-txt {
    font-size: 13px;
    line-height: 32px;
    letter-spacing: 2px;
    margin: 0;
    padding-bottom: 4px;
    position: relative;
    top: 0px;
    text-align: center;
    color: #fff;
}
.box-video-subtext {
    font-size: 12px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    text-align: center;
}
}

/* End Video */

Paso 3) Agregar el siguiente código despues del <body>

Ejemplo

<section>
<div class="box-video">
<amp-youtube class="opacity-video"  id="video" data-videoid="53mfiKTia-w" height="290" layout="responsive" width="515" data-param-controls="0" data-param-showinfo="0" data-param-mute="1" data-param-rel="0" data-param-autoplay="1" data-param-loop="1" data-param-playlist="53mfiKTia-w" autoplay></amp-youtube>
   <div class="box-video-container container">
     <div class="box-video-relative">
        <h1 class="box-video-txt">FULL-SCREEN VIDEO BACKGROUND</h1>
        <p class="box-video-subtext"><strong>Add breathtaking video background to your  website w/o touching the code.</strong></p>
                </div>
         </div>
   </div>
</section>

Paso 4) Mire su funcionamiento
A continuación la estructura completa del ejemplo

Ejemplo

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<link rel="canonical" href="https://www.amphtmlenespanol.com/">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<style amp-custom>
section {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Video */

.box-video{
    position: relative;
    height: 802px;
}

.opacity-video{
    position: relative;
    background: #222;
    overflow: hidden;
}
.opacity-video:before {
    content: &#39; &#39;;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: rgb(40, 50, 78)
}

.box-video-container {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    -webkit-transform: translate3d(-50%,-50%,0);
    z-index: 4;
}

.box-video-relative {
    color: #fff;
    position: relative;
}

.box-video-txt {
    font-size: 46px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 50px;
    margin: -18px 0 1px 0;
    padding-bottom: 41px;
    position: relative;
    top: 8px;
    text-align: center;
    color: #fff;
}
.box-video-subtext {
    font-size: 21px;
    line-height: 29px;
    margin: -32px 0 3px 0;
    padding: 0 0 41px 0;
    position: relative;
    top: 6px;
    text-align: center;
}

@media only screen and (max-width: 1024px) {
.box-video {
    height: 567px;
}

  }
@media only screen and (max-width: 1006px){
.box-video {
    height: 214px;
}
.box-video-container {
    position: absolute;
    top: 50%;
    left: 40%;
    margin-left: 10%;
    -webkit-transform: translate3d(-50%,-50%,0);
    z-index: 4;
    width: 100%;
}
.box-video-txt {
    font-size: 13px;
    line-height: 32px;
    letter-spacing: 2px;
    margin: 0;
    padding-bottom: 4px;
    position: relative;
    top: 0px;
    text-align: center;
    color: #fff;
}
.box-video-subtext {
    font-size: 12px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    text-align: center;
}
}

/* End Video */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

</head>

<body>

<section>
<div class="box-video">
<amp-youtube class="opacity-video"  id="video" data-videoid="53mfiKTia-w" height="290" layout="responsive" width="515" data-param-controls="0" data-param-showinfo="0" data-param-mute="1" data-param-rel="0" data-param-autoplay="1" data-param-loop="1" data-param-playlist="53mfiKTia-w" autoplay></amp-youtube>
   <div class="box-video-container container">
     <div class="box-video-relative">
        <h1 class="box-video-txt">FULL-SCREEN VIDEO BACKGROUND</h1>
        <p class="box-video-subtext"><strong>Add breathtaking video background to your  website w/o touching the code.</strong></p>
                </div>
         </div>
   </div>
</section>

</body>
</html>


Tags:

Share:

Related post

Comentarios

Disqus

Disqus comments:
Facebook

Facebook comments: