forked from Shopify/dawn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
video.liquid
128 lines (126 loc) · 7.05 KB
/
video.liquid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
<div class="video-section{% unless section.settings.full_width %} page-width{% endunless %}">
<div{% if section.settings.full_width %} class="page-width"{% endif %}>
<h2 class="title">{{ section.settings.heading }}</h2>
</div>
<noscript>
<div class="video-section__media"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
src="{{ section.settings.cover_image | img_url: '1920x' }}"
sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.cover_image.width }}"
height="{{ section.settings.cover_image.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</a>
</div>
</noscript>
<deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<button
id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
class="video-section__poster media deferred-media__poster media--landscape"
type="button"
>
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
src="{{ section.settings.cover_image | img_url: '1920x' }}"
sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.cover_image.width }}"
height="{{ section.settings.cover_image.height }}"
>
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
</button>
<template>
{%- if section.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
{% schema %}
{
"name": "t:sections.video.name",
"tag": "section",
"class": "spaced-section spaced-section--full-width",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Video",
"label": "t:sections.video.settings.heading.label"
},
{
"type": "image_picker",
"id": "cover_image",
"label": "t:sections.video.settings.cover_image.label"
},
{
"type": "video_url",
"id": "video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
"label": "t:sections.video.settings.video_url.label",
"placeholder": "t:sections.video.settings.video_url.placeholder",
"info": "t:sections.video.settings.video_url.info"
},
{
"type": "text",
"id": "description",
"label": "t:sections.video.settings.description.label",
"info": "t:sections.video.settings.description.info"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.video.settings.full_width.label",
"default": false
}
],
"presets": [
{
"name": "t:sections.video.presets.name"
}
]
}
{% endschema %}