Show/hide markup
<div id="banner" class="section banner bg-video">

    <div class="hide-for-medium img--small">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>
    <div class="show-for-medium hide-for-large img--medium">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>
    <div class="show-for-large img--large">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>

    <div class="bg-video-viewport" data-height="600" data-width="1800" data-mp4="video.mp4" data-webm="video.webm"></div>

</div>
<div class="visually-hidden">
    <p>Description of the video:</p>
    <p>[Add transcript here with one descriptive line per paragraph element.]</p>
</div>