Hilbert Component Library

Background Video 

<div class="js-background-video-wrapper bg_video _video" data-background-video='null'>
    <div class="bg_video_iframe_wrap _video_iframe_wrap">
        <div class=" bg_video_iframe_target _video_iframe_target js-iframe-target"></div>
    </div>

    <div class="bg_video_controls _video_controls">

        <button class="bg_video_play_button js-bg-video-play-button">
            <span class="bg_video_play_button_inner">
                <span class="bg_video_play_button_label">Play Video</span>
                <span class="bg_video_play_button_icon" aria-hidden="true">
                    <svg class="icon icon_video_play">
                        <use href="/images/icons.svg#video_play" />
                    </svg>
                </span>
            </span>
        </button>

        <button class="bg_video_pause_button js-bg-video-pause-button">
            <span class="bg_video_pause_button_inner">
                <span class="bg_video_pause_button_label">Pause Video</span>
                <span class="bg_video_pause_button_icon" aria-hidden="true">
                    <svg class="icon icon_video_pause">
                        <use href="/images/icons.svg#video_pause" />
                    </svg>
                </span>
            </span>
        </button>
    </div>
</div>
 
<div class="js-background-video-wrapper bg_video {{ class }}_video" data-background-video='{{ video_options|json_encode }}'>
	<div class="bg_video_iframe_wrap {{ class }}_video_iframe_wrap">
		<div class=" bg_video_iframe_target {{ class }}_video_iframe_target js-iframe-target"></div>
	</div>

	<div class="bg_video_controls {{ class }}_video_controls">
		{% render '@partial-button' with {
			class: 'bg_video_play',
			title: 'Play Video',
			icon: 'video_play',
			js: true
		} %}

		{% render "@partial-button" with {
			class: 'bg_video_pause',
			title: 'Pause Video',
			icon: 'video_pause',
			js: true
		} %}
	</div>
</div>

No notes defined.