← back to Dw Theme Hamburger
sections/home-video.liquid
495 lines
{% liquid
assign section_id = section.id
assign section_subheading = section.settings.text
assign overlay_heading = section.settings.overlay_heading | escape
assign overlay_text = section.settings.overlay_text
assign overlay_text_position = section.settings.overlay_header_position
assign overlay_image = section.settings.overlay_image
assign overlay_text_color = section.settings.overlay_text_color
assign video = section.settings.video
assign autoplay = section.settings.autoplay
assign aspect_ratio = section.settings.aspect_ratio
assign show_headings_above_video = false
assign show_overlay = true
assign overlay_opacity = 0
if section.settings.video_layout == 'full-width'
assign treat_as_banner = true
endif
if overlay_image
assign placeholder_image = true
else
assign placeholder_image = false
endif
assign play_button_style = 'primary'
if section.settings.overlay_color != blank and section.settings.overlay_color != 'rgba(0,0,0,0)'
assign overlay_color = section.settings.overlay_color
endif
if section.settings.overlay_opacity > 0
assign overlay_opacity = section.settings.overlay_opacity | times: 0.01
endif
if overlay_color
assign overlay_color = overlay_color | color_modify: 'alpha', overlay_opacity
endif
%}
{%- capture video_classes -%}
video-section--{{ section.settings.video_layout }}
{%- endcapture -%}
{%- capture wrapper_classes -%}
video-section__wrapper--aspect-ratio-{{ aspect_ratio }}
video-section__wrapper--show-text-while-playing-{{ show_headings_above_video }}
{%- endcapture -%}
{% comment %}Inject @pixelunion/pxs-video/video begin{% endcomment %}
{%- comment -%}
# General
@param video_classes {String}
A space separated list of classnames to add to the video section element
@param wrapper_classes {String}
A space separated list of classnames to add to the video internal wrapper element
@param section_id {String}
The id for the section or block
# Section Settings
@param show_headings_above_video {Boolean}
If set to true, the headings will appear above the video
@param section_heading {String} Optional
Section heading
@param section_subheading {String} Optional
Section subheading
@param treat_as_banner {Boolean} Optional
If this is set to true an attribute will be added to treat this as a banner. Usually important for the header if it is transparent.
# Video Settings
@param video {Object}
The video object for the YouTube or Vimeo video url entered
@param html5_video {String}
The HTML5 video url for media uploaded to the settings admin
@param autoplay {Boolean}
If set to true, the video will play automatically
@param start_muted {Boolean}
If set to true, the video will start with the sound turned off
@param loop_video {Boolean}
If set to true, the video will loop
@param aspect_ratio {String}
Updates the aspect ratio for the video player
# Overlay Settings
@param show_overlay {Boolean}
If set to true, an image will be placed over the video.
If no image is uploaded then a placeholder image will be used.
This also affects if the overlay color is added.
@param overlay_image {Object}
The overlay image to be used
@param overlay_color {String}
Overlay color used for inline style
@param overlay_text_color {String}
Overlay text color used for inline style
@param overlay_opacity {Number}
Overlay opacity used for inline style
@param overlay_heading {String}
The video heading to appear in the overlay
@param overlay_text {String}
The video subheading to appear in the overlay
@param overlay_text_position {String}
Sets the text position of the overlay header content
# Text Settings
@param preheading {String}
Preheading to show above the video
@param heading {String}
Heading to show above the video
@param subheading {String}
Subheading to show above the video
# Button Settings
@param play_button_style {String}
Class added to the play button
@param call_to_action_text {String}
This will add a call to action link inside the overlay
@param call_to_action_link {String}
This will populate the href of the call to action link
{%- endcomment -%}
{% liquid
assign treat_as_banner = treat_as_banner | default: false
if section_id == blank
assign section_id = section.id
endif
if video != blank
assign video_type = video.type
assign video_id = video.id
elsif html5_video != blank
assign video_type = 'html5'
assign video_id = html5_video.id
else
assign video_type = 'youtube'
assign video_id ='_9VUPq3SxOc'
endif
%}
<script
type="application/json"
data-section-type="pxs-video"
data-section-id="{{ section_id }}"
data-section-data
>
{
"autoplay": {{ autoplay | default: false | json }},
"startMuted": {{ start_muted | default: false | json }},
"loopVideo": {{ loop_video | default: false | json }},
"aspectRatio": {{ aspect_ratio | json }}
}
</script>
<section
class="
video-section
{{ video_classes }}
"
aria-label="{{ 'sections.video.video' | t }}"
data-banner="{{ treat_as_banner }}"
>
{%- if section_heading != blank or section_subheading != blank -%}
<div class="section__header section__header--video">
{%- if section_heading != blank -%}
<h2 class="section__heading section__heading--video">
{{ section_heading }}
</h2>
{%- endif -%}
{%- if section_subheading != blank -%}
<div class="section__subheading section__subheading--video rte">
{{ section_subheading }}
</div>
{%- endif -%}
</div>
{%- endif -%}
{% if show_headings_above_video %}
{%
if heading != blank or subheading != blank or preheading != blank
%}
<div class="video-section__header">
{% if preheading != blank %}
<div class="video-section__preheading">
{{ preheading }}
</div>
{% endif %}
{% if heading != blank %}
<h2 class="video-section__heading">
{{ heading }}
</h2>
{% endif %}
{% if subheading != blank %}
<div class="video-section__subheading">
{{ subheading }}
</div>
{% endif %}
</div>
{% endif %}
{% endif %}
<div
class="
video-section__wrapper
{{ wrapper_classes }}
"
>
{% if show_overlay %}
<div
class="video-section__overlay"
{%
if overlay_color != blank
or overlay_opacity != 0
or overlay_text_color != blank
%}
style="
{%- if overlay_color != blank -%}
--overlay-color: {{ overlay_color }};
{%- endif -%}
{%- if overlay_opacity != 0 -%}
--overlay-opacity: {{ overlay_opacity }};
{%- endif -%}
{%- if overlay_text_color != blank -%}
--overlay-text-color: {{ overlay_text_color }};
{%- endif -%}
"
{% endif %}
>
{% if overlay_image %}
<div class="video-section__overlay-image-wrapper">
{%
render 'rimg',
img: overlay_image,
size: '1400x',
class: 'video-section__overlay-image',
canvas: true,
lazy: true,
focal_point: overlay_image.presentation.focal_point,
%}
</div>
{% elsif video == blank and html5_video == blank %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'video-section__overlay-image video-section__overlay-placeholder' }}
{% endif %}
<div class="
video-section__overlay-header
video-section__overlay-header--text-position-{{ overlay_text_position }}
">
{% if overlay_heading != blank %}
<p class="video-section__overlay-heading">{{ overlay_heading }}</p>
{% endif %}
{% if overlay_text != blank %}
<div class="video-section__overlay-subheading">{{ overlay_text }}</div>
{% endif %}
<div class="video-section__button-wrapper">
<button
class="
video-section__play-button
{% if play_button_style != blank %}
video-section__play-button--{{ play_button_style }}
{% endif %}
"
data-video-play-button
aria-label="{{ 'sections.video.play_button' | t }}"
>
<span class="video-section__play-icon">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 18.1958C0 18.9812 0.863951 19.46 1.53 19.0438L14.6432 10.848C15.2699 10.4563 15.2699 9.54367 14.6432 9.152L1.53 0.956248C0.863949 0.539968 0 1.01881 0 1.80425L0 18.1958Z" fill="white"/>
</svg>
</span>
<span class="video-section__play-button-text">
{{ 'sections.video.play_button' | t }}
</span>
<svg
class="video-section__loading-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="currentColor" fill-rule="evenodd">
<path class="video-loading-icon-phalange" d="M11,2 L11,6 C11,6.55228475 11.4477153,7 12,7 C12.5522847,7 13,6.55228475 13,6 L13,2 C13,1.44771525 12.5522847,1 12,1 C11.4477153,1 11,1.44771525 11,2 Z"/>
<path class="video-loading-icon-phalange" d="M16.9471068,8.46710678 L19.7771068,5.63710678 C20.1676311,5.24658249 20.1676311,4.61341751 19.7771068,4.22289322 C19.3865825,3.83236893 18.7534175,3.83236893 18.3628932,4.22289322 L15.5328932,7.05289322 C15.1423689,7.44341751 15.1423689,8.07658249 15.5328932,8.46710678 C15.9234175,8.85763107 16.5565825,8.85763107 16.9471068,8.46710678 Z"/>
<path class="video-loading-icon-phalange" d="M18,13 L22,13 C22.5522847,13 23,12.5522847 23,12 C23,11.4477153 22.5522847,11 22,11 L18,11 C17.4477153,11 17,11.4477153 17,12 C17,12.5522847 17.4477153,13 18,13 Z"/>
<path class="video-loading-icon-phalange" d="M15.5328932,16.9471068 L18.3628932,19.7771068 C18.7534175,20.1676311 19.3865825,20.1676311 19.7771068,19.7771068 C20.1676311,19.3865825 20.1676311,18.7534175 19.7771068,18.3628932 L16.9471068,15.5328932 C16.5565825,15.1423689 15.9234175,15.1423689 15.5328932,15.5328932 C15.1423689,15.9234175 15.1423689,16.5565825 15.5328932,16.9471068 Z"/>
<path class="video-loading-icon-phalange" d="M11,18 L11,22 C11,22.5522847 11.4477153,23 12,23 C12.5522847,23 13,22.5522847 13,22 L13,18 C13,17.4477153 12.5522847,17 12,17 C11.4477153,17 11,17.4477153 11,18 Z"/>
<path class="video-loading-icon-phalange" d="M5.63710678,19.7771068 L8.46710678,16.9471068 C8.85763107,16.5565825 8.85763107,15.9234175 8.46710678,15.5328932 C8.07658249,15.1423689 7.44341751,15.1423689 7.05289322,15.5328932 L4.22289322,18.3628932 C3.83236893,18.7534175 3.83236893,19.3865825 4.22289322,19.7771068 C4.61341751,20.1676311 5.24658249,20.1676311 5.63710678,19.7771068 Z"/>
<path class="video-loading-icon-phalange" d="M2,13 L6,13 C6.55228475,13 7,12.5522847 7,12 C7,11.4477153 6.55228475,11 6,11 L2,11 C1.44771525,11 1,11.4477153 1,12 C1,12.5522847 1.44771525,13 2,13 Z"/>
<path class="video-loading-icon-phalange" d="M4.22289322,5.63710678 L7.05289322,8.46710678 C7.44341751,8.85763107 8.07658249,8.85763107 8.46710678,8.46710678 C8.85763107,8.07658249 8.85763107,7.44341751 8.46710678,7.05289322 L5.63710678,4.22289322 C5.24658249,3.83236893 4.61341751,3.83236893 4.22289322,4.22289322 C3.83236893,4.61341751 3.83236893,5.24658249 4.22289322,5.63710678 Z"/>
</g>
</svg>
</button>
{% if call_to_action_text != blank and call_to_action_link != blank %}
<a class="video-section__call-to-action" href="{{ call_to_action_link }}">
{{ call_to_action_text }}
</a>
{% endif %}
</div>
</div>
</div>
{% endif %}
<div
class="
video-section__video
video-section__video--{{ video_type }}
{% if show_overlay %}
video-section__video--with-overlay
{% endif %}
"
data-video="{{ video_type }}"
data-video-id="{{ video_id }}"
tabindex="0"
>
{% if video == blank and html5_video != blank %}
<video
class="video-section__html5-video"
data-html5-video
playsinline
>
<source src="{{ html5_video }}">
</video>
{% endif %}
</div>
</div>
</section>
{% comment %}Inject @pixelunion/pxs-video/video end{% endcomment %}
{% schema %}
{
"name": "Video",
"class": "shopify-section--video",
"settings": [
{
"type": "select",
"id": "video_layout",
"label": "Layout",
"options": [
{
"value": "content-width",
"label": "Content width"
},
{
"value": "full-width",
"label": "Full width"
}
],
"default": "full-width"
},
{
"type": "select",
"id": "aspect_ratio",
"label": "Aspect ratio",
"options": [
{
"label": "16:9",
"value": "16-9"
},
{
"label": "21:9",
"value": "21-9"
}
],
"default": "16-9"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay video",
"default": false
},
{
"type": "video_url",
"id": "video",
"label": "Video link",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "header",
"content": "Content"
},
{
"type": "image_picker",
"id": "overlay_image",
"label": "Image"
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "text",
"id": "overlay_heading",
"label": "Heading",
"default": "Video"
},
{
"type": "richtext",
"id": "overlay_text",
"label": "Subheading",
"default": "<p>Enhance your home page with a video that relates to your process, products, or story.</p>"
},
{
"type": "select",
"id": "overlay_header_position",
"label": "Text position",
"options": [
{
"label": "Above button",
"value": "above-button"
},
{
"label": "Below button",
"value": "below-button"
}
],
"default": "above-button"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Overlay opacity",
"step": 5,
"min": 0,
"max": 100,
"default": 70,
"unit": "%"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#000000"
},
{
"type": "color",
"id": "overlay_text_color",
"label": "Overlay text color",
"default": "#FFFFFF"
}
],
"presets": [
{
"category": "Video",
"name": "Video"
}
],
"disabled_on": {
"groups": [
"*"
]
}
}
{% endschema %}