<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 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>
</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>"
},
"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
}
.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.