<section class="splitter splitter_bg-color_white splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="media AccentLight cover">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Título opcional para el media
</h2>
<div class="
bodycopy-m
">
<p>Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media</p>
</div>
<div class="wrap">
<img src="https://img.freepik.com/foto-gratis/cintura-arriba-mudanza-pareja_329181-18188.jpg?w=2000" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="media{{#if isAccentLight}} AccentLight{{/if}}{{#if isCover}} cover{{/if}}">
<div class="row">
{{#if isBlog}}
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10">
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{/if}}
{{#if title}}{{> @title-l title }}{{/if}}
{{#if bodycopy}}{{> @bodycopy-m bodycopy }}{{/if}}
<div class="wrap">
{{#if isVideo}}
<video src="{{video-url}}" class="optanon-category-4" controls></video>
{{else if isYouTube}}
<div class="video-responsive">
<iframe width="560" height="315" src="{{video-url-youtube}}?autoplay=0&mute=0&controls=1" class="optanon-category-4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
{{else if isVimeoIframe}}
<div class="video-responsive">
<iframe src="{{video-url-vimeo-iframe}}" class="optanon-category-4" frameborder="0" title="Vimeo video player" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
{{else}}
<img src="{{img-url}}" />
{{/if}}
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"title": {
"text": "Título opcional para el media"
},
"bodycopy": {
"text": "<p>Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media Párrafo opcional de entradilla al media</p>"
},
"video-url": "https://player.vimeo.com/progressive_redirect/playback/712784021/rendition/1080p/file.mp4?loc=external&signature=f3d30c62eed00fe879cc786ad5dce854f123dd0e399481779c27c80f291c0ddf",
"img-url": "https://img.freepik.com/foto-gratis/cintura-arriba-mudanza-pareja_329181-18188.jpg?w=2000",
"isCover": true,
"isAccentLight": true
}
.media {
.title-l{margin-bottom: 20px; text-align:center;
@media (--viewport-xs-max) {
margin-bottom:10px;
}
}
.bodycopy-m{margin-bottom: 30px; text-align: center; padding-left: 60px; padding-right: 60px;
@media (--viewport-xs-max) {
margin-bottom:30px;padding-left: 30px; padding-right: 30px;
}
}
.wrap{
img, video{width: 100%;height:auto;margin-bottom:-9px;
}
}
&.AccentLight{
background-color: var(--color-accent-light); padding-top: 40px;
}
&.cover{
display: flex;
justify-content: center;
overflow: hidden;
.wrap{width: 100%;height:auto;display: flex;justify-content: center;
img, video{
@media (--viewport-ms-max) {
/*transform: scale(2);*/
width: 200%;
display: block;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
.video-responsive {
overflow:hidden;
padding-bottom:56.3%; /* Adecua este valor para controlar la altura del video */
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
}
Variantes: Default, Blog, Video, Accent Light, Cover in mobile, Cover in mobile accent light. Pueden configurarse la url de la imágen y del vídeo.