I’m working in the Dawn theme and I’m trying to remove the cover image over the Video (using the default Video section), so users can click once to play the video, rather than clicking once to remove the cover image, and again to start playing the video. Any tips would be much appreciated 
2 Likes
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thank you! https://shawn.livvid.tv
Hey Truewrathie,
I took a look at your siite and it looks like you worked out how to do this?
Could you share with me how, I have the same problem? 
Thanks!
Sure thing! Instead of using a Video section, I added a Custom Liquid section and just added an iframe for the video like this:
That way, instead of a Cover Image, you just see the video’s thumbnail, and you can click the YouTube link at the bottom of the video to visit the channel, which is a nice thing in my case.
And I reduced the section padding to 0px on top and bottom.
Hope this helps!
Hi Truewrathie,
The in “” problem is the deffered class which is controlled via global.js. This class puts the “poster” over the video as soon as an iframe is taken in a “”. You can solve this easily for now. In video.liquid search for the code:
The first thing you can do is, just simple change the first to
and the second one to
. Should be shown as following:
{%- 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 -%}
Save now and try it again and you will see, the poster is gone.
But afterwards there are some things you have to change anyway, as the button and stuff are rendered. To make it easier, please find the complete video.liquid code below. You can change the complete code in your video.liquid, or add a new a new section e.g. called video-truewrathie.liquid and put the code into there. Afterwards if you edit your theme, you will find a new section called “You Tube Video”. I tested the code on Dawn, beginning from Version 7.0.1:
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{% schema %}
{
"name": "You-Tube Video",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Video",
"label": "t:sections.video.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.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
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "You-Tube Video"
}
]
}
{% endschema %}
Thats all.
Additional:
If you like changing the video-size, edit “base.liquid”. On the end of base.liquid insert:
/* Edit video size */
@media (min-width: 750px){
.video-section__media{
max-width: 800px !important;
padding-bottom: 400px !important;
margin: 0 auto;
height: auto;
}
}
You can play with max-width and padding-bottom values fitting your personal size.
Hope that helps.
Have a great day,
Stefan
1 Like