Copy environment

Impossible Video 

<div class="section             section--pt-large
                 section--pb-large
     section--background-1 impossible-video" data-theme="dark">
    <div class="section__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
                <div class="section__title animation__target">
                    <h2>This is totally impossible</h2>
                </div>
                <div class="section__content ">
                    <div class="video  impossible-video__video">
                        <div class="video__inner">
                            <video class="video__video lazyload" preload="none" data-object-fit muted="" data-autoplay="" loop="" playsinline="" data-poster="https://placehold.it/1600x900">
                                <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
 
{% set topSpacing %}
    {% if 'small' in data.topSpacing %}
        section--pt-small
    {% elseif 'medium' in data.topSpacing %}
        section--pt-medium
    {% else %}
        section--pt-large
    {% endif %}
{% endset %}

{% set bottomSpacing %}
    {% if 'small' in data.bottomSpacing %}
        section--pb-small
    {% elseif 'medium' in data.bottomSpacing %}
        section--pb-medium
    {% else %}
        section--pb-large
    {% endif %}
{% endset %}

{% set content %}
    {% if data.video %}
        {% include '@video' with { data: data.video, autoplay: true, loop: true, class: 'impossible-video__video', modifier: '' } %}
    {% endif %}
{% endset %}

{% include '@section' with { class: 'impossible-video', modifier: topSpacing ~ ' ' ~ bottomSpacing ~ ' section--background-1', data: { title: data.title, content: content }, container: true } %}

{
  "language": "en-US",
  "data": {
    "title": "This is totally impossible",
    "video": {
      "poster": "https://placehold.it/1600x900",
      "videos": [
        {
          "type": "video/mp4",
          "src": "http://techslides.com/demos/sample-videos/small.mp4"
        }
      ]
    }
  }
}
  • Content: 
    .impossible-video {
    min-height: 56.25vw;
    height: 100vh;
    position: relative;
    z-index: map-get($zindex, 'default');
}

.section__title {
    .impossible-video & {
        @include bp(md-min) {
            max-width: 530px;
            padding-left: 72px;
        }
    }
}

.section__content {
    .impossible-video & {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto 0;
        z-index: -1;
    }
}

.impossible-video__video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto 0;
}
  • URL: /components/raw/impossible-video/impossible-video.scss
  • Filesystem Path: src/patterns/modules/impossible-video/impossible-video.scss
  • Size: 640 Bytes
  • Handle: @impossible-video--default
  • Filesystem Path: src/patterns/modules/impossible-video/impossible-video.twig
  • References (2): @video, @section