Copy environment

Video

Preview 
<div class="video js-video  ">
    <div class="video__holder">
        <figure id="video__figure-Q5Nk7jYBkE" class="video__figure" data-src="https://vimeo.com/250078453" data-autoplay="true">
            <div class="video__inner">
                <div id="video__video" class="video__video"></div>
            </div>
        </figure>

        <div class="image image--fluid video__image">
            <picture class="image__picture">
                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
                    media="(min-width: 600px)" />
                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                    data-sizes="auto" alt="" class="image__img lazyload">
            </picture>
        </div>

    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "video": "https://vimeo.com/250078453",
    "image": true,
    "autoplay": true
  }
}

Manual

Preview 
<div class="video js-video  ">
    <div class="video__holder">
        <figure id="video__figure-PD4oB1FMA4" class="video__figure" data-src="https://vimeo.com/250078453" data-autoplay="false">
            <div class="video__inner">
                <div id="video__video" class="video__video"></div>
            </div>
        </figure>

        <div class="image image--fluid video__image">
            <picture class="image__picture">
                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
                    media="(min-width: 600px)" />
                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                    data-sizes="auto" alt="" class="image__img lazyload">
            </picture>
        </div>

        <div class="video__button js-video-play">
            <button class="video__button-element">
                        <svg class="icon  video__button-icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#play"></use>
</svg>
                    </button>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "video": "https://vimeo.com/250078453",
    "image": true,
    "autoplay": null
  }
}