Video

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="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 class="video {{ modifier }} {{ class }}">
    <div class="video__inner">
        {% if data.vimeo %}
            <iframe
                class="video__video lazyload"
                src="{{ data.vimeo }}"
                allowfullscreen
                title="">
            </iframe>
        {% else %}
            <video
                class="video__video lazyload"
                preload="none"
                data-object-fit
                {% if autoplay %}muted=""{% endif %}
                {% if autoplay %}data-autoplay=""{% endif %}
                {% if loop %}loop=""{% endif %}
                {% if controls %}controls=""{% endif %}
                playsinline=""
                {% if data.poster %}data-poster="{{ data.poster }}"{% endif %}>
                {% for video in data.videos %}
                    <source src="{{ video.src }}" type="{{ video.type }}">
                {% endfor %}
            </video>
            {% if not autoplay %}
                {% include '@button' with { data: { text: 'play', icon: 'play-icon', class: 'video__play-icon' }, class: 'video__play', modifier: 'button--reverted' } %}
            {% endif %}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "autoplay": true,
  "loop": true,
  "data": {
    "poster": "https://placehold.it/1600x900",
    "videos": [
      {
        "type": "video/mp4",
        "src": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ]
  }
}

File:

Content:


                                .video {
    overflow: hidden;

    &:not(.impossible-video__video) {
        @include aspect-ratio(16,9, 'video__inner');
    }
}

.video__inner {
    width: 100%;
    height: 100%;
}

.video__video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: map-get($zindex, 'default');

    .button__icon {
        font-size: 24px;
        fill: $color-brand-01;
    }
}

.video__play:hover {
    .button__icon {
        fill: $color-ui-02;
    }
}

URL: /components/raw/video/video.scss
Filesystem Path: src/patterns/components/video/video.scss
Size: 889 Bytes

Content:


                                import './video.scss';
import Component from '../component/component';
export default class Video extends Component {
    static initSelector: string = '.video';

    public videoElement: JQuery;
    public playButton: JQuery;

    constructor(target: HTMLElement) {
        super(target);

        this.videoElement = this.element.find('.video__video');
        this.playButton = this.element.find('.video__play');

        this.init();
    }

    init(): void {
        this.playButton.on('click', this.playButtonHandler.bind(this));

        if (this.videoElement.length && !this.videoElement[0].hasAttribute('data-autoplay')) {
            this.videoElement.removeAttr('controls');
        }
    }

    playButtonHandler(): void {
        this.videoElement.trigger('play');
        this.playButton.addClass('h-hidden');
        this.videoElement.attr('controls', 'controls');
    }
}

URL: /components/raw/video/video.ts
Filesystem Path: src/patterns/components/video/video.ts
Size: 888 Bytes

Handle: @video--default
Filesystem Path: src/patterns/components/video/video.twig
References (1): @button
Referenced by (11): @hero, @hero--offset, @hero--offset-with-video, @hero--large, @hero--split, @hero--3d, @case-study, @dark-block, @dark-block--video, @dark-block--lottie, @impossible-video


        
        
        <div class="video  ">
    <div class="video__inner">
        <video class="video__video lazyload" preload="none" data-object-fit controls="" playsinline="" data-poster="https://placehold.it/1600x900">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>

        <button type="button" class="button button--reverted video__play button--icon">
            <span class="button__inner">
                <span class="button__icon-wrapper"><svg class="icon  button__icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#play-icon"></use>
                    </svg>
                </span> <span class="button__text">play</span>
            </span>
        </button>
    </div>
</div>


        <div class="video {{ modifier }} {{ class }}">
    <div class="video__inner">
        {% if data.vimeo %}
            <iframe
                class="video__video lazyload"
                src="{{ data.vimeo }}"
                allowfullscreen
                title="">
            </iframe>
        {% else %}
            <video
                class="video__video lazyload"
                preload="none"
                data-object-fit
                {% if autoplay %}muted=""{% endif %}
                {% if autoplay %}data-autoplay=""{% endif %}
                {% if loop %}loop=""{% endif %}
                {% if controls %}controls=""{% endif %}
                playsinline=""
                {% if data.poster %}data-poster="{{ data.poster }}"{% endif %}>
                {% for video in data.videos %}
                    <source src="{{ video.src }}" type="{{ video.type }}">
                {% endfor %}
            </video>
            {% if not autoplay %}
                {% include '@button' with { data: { text: 'play', icon: 'play-icon', class: 'video__play-icon' }, class: 'video__play', modifier: 'button--reverted' } %}
            {% endif %}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "autoplay": false,
  "loop": false,
  "data": {
    "poster": "https://placehold.it/1600x900",
    "videos": [
      {
        "type": "video/mp4",
        "src": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ]
  },
  "controls": true
}

File:

Content:


                                .video {
    overflow: hidden;

    &:not(.impossible-video__video) {
        @include aspect-ratio(16,9, 'video__inner');
    }
}

.video__inner {
    width: 100%;
    height: 100%;
}

.video__video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: map-get($zindex, 'default');

    .button__icon {
        font-size: 24px;
        fill: $color-brand-01;
    }
}

.video__play:hover {
    .button__icon {
        fill: $color-ui-02;
    }
}

URL: /components/raw/video/video.scss
Filesystem Path: src/patterns/components/video/video.scss
Size: 889 Bytes

Content:


                                import './video.scss';
import Component from '../component/component';
export default class Video extends Component {
    static initSelector: string = '.video';

    public videoElement: JQuery;
    public playButton: JQuery;

    constructor(target: HTMLElement) {
        super(target);

        this.videoElement = this.element.find('.video__video');
        this.playButton = this.element.find('.video__play');

        this.init();
    }

    init(): void {
        this.playButton.on('click', this.playButtonHandler.bind(this));

        if (this.videoElement.length && !this.videoElement[0].hasAttribute('data-autoplay')) {
            this.videoElement.removeAttr('controls');
        }
    }

    playButtonHandler(): void {
        this.videoElement.trigger('play');
        this.playButton.addClass('h-hidden');
        this.videoElement.attr('controls', 'controls');
    }
}

URL: /components/raw/video/video.ts
Filesystem Path: src/patterns/components/video/video.ts
Size: 888 Bytes

Handle: @video--controls
Filesystem Path: src/patterns/components/video/video.twig
References (1): @button

Vimeo

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="video  ">
    <div class="video__inner">
        <iframe class="video__video lazyload" src="https://player.vimeo.com/video/749413262?h=6d40081087" allowfullscreen title="">
        </iframe>
    </div>
</div>


        <div class="video {{ modifier }} {{ class }}">
    <div class="video__inner">
        {% if data.vimeo %}
            <iframe
                class="video__video lazyload"
                src="{{ data.vimeo }}"
                allowfullscreen
                title="">
            </iframe>
        {% else %}
            <video
                class="video__video lazyload"
                preload="none"
                data-object-fit
                {% if autoplay %}muted=""{% endif %}
                {% if autoplay %}data-autoplay=""{% endif %}
                {% if loop %}loop=""{% endif %}
                {% if controls %}controls=""{% endif %}
                playsinline=""
                {% if data.poster %}data-poster="{{ data.poster }}"{% endif %}>
                {% for video in data.videos %}
                    <source src="{{ video.src }}" type="{{ video.type }}">
                {% endfor %}
            </video>
            {% if not autoplay %}
                {% include '@button' with { data: { text: 'play', icon: 'play-icon', class: 'video__play-icon' }, class: 'video__play', modifier: 'button--reverted' } %}
            {% endif %}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "autoplay": true,
  "loop": true,
  "data": {
    "poster": "https://placehold.it/1600x900",
    "videos": [
      {
        "type": "video/mp4",
        "src": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ],
    "vimeo": "https://player.vimeo.com/video/749413262?h=6d40081087"
  }
}

File:

Content:


                                .video {
    overflow: hidden;

    &:not(.impossible-video__video) {
        @include aspect-ratio(16,9, 'video__inner');
    }
}

.video__inner {
    width: 100%;
    height: 100%;
}

.video__video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: map-get($zindex, 'default');

    .button__icon {
        font-size: 24px;
        fill: $color-brand-01;
    }
}

.video__play:hover {
    .button__icon {
        fill: $color-ui-02;
    }
}

URL: /components/raw/video/video.scss
Filesystem Path: src/patterns/components/video/video.scss
Size: 889 Bytes

Content:


                                import './video.scss';
import Component from '../component/component';
export default class Video extends Component {
    static initSelector: string = '.video';

    public videoElement: JQuery;
    public playButton: JQuery;

    constructor(target: HTMLElement) {
        super(target);

        this.videoElement = this.element.find('.video__video');
        this.playButton = this.element.find('.video__play');

        this.init();
    }

    init(): void {
        this.playButton.on('click', this.playButtonHandler.bind(this));

        if (this.videoElement.length && !this.videoElement[0].hasAttribute('data-autoplay')) {
            this.videoElement.removeAttr('controls');
        }
    }

    playButtonHandler(): void {
        this.videoElement.trigger('play');
        this.playButton.addClass('h-hidden');
        this.videoElement.attr('controls', 'controls');
    }
}

URL: /components/raw/video/video.ts
Filesystem Path: src/patterns/components/video/video.ts
Size: 888 Bytes

Handle: @video--vimeo
Filesystem Path: src/patterns/components/video/video.twig
References (1): @button

Controls

Vimeo

Forms

Notifications

CMS

Copy environment

Video

Controls

Vimeo