How Can I Make My Video Background Clickable

Store Design
,
1

Hi,

How can I make my video-background section clickable?

I want the video to be clickable without a button.

My website is https://yolandaadamsjewelry.com/

Please see below:

{%- if section.blocks.size > 0 -%}
	{%- for block in section.blocks -%}
		{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

		{% if block.type == 'video' %}
			

				{%- if block.settings.video_link != blank -%}
					

						
					

				{% endif %}

				

				
					{% if block.settings.title != blank %}
						# 
							{{ block.settings.title | escape }}
						
					{% endif %}

					{%- style -%}
						.videoBackground .imageBoxInfoDescription p {
							color: {{ block.settings.color_text }}!important;
						}
					{%- endstyle -%}

					{% if block.settings.text != blank %}
						
							{{ block.settings.text }}
						

					{% endif %}

					{% if block.settings.button_link != blank and block.settings.button_label != blank %}
						
							{{ block.settings.button_label | escape }}
						
					{% endif %}
				

			

			{% else %}
				

					

					
						{% if block.settings.title != blank %}
							# 
								{{ block.settings.title | escape }}
							
						{% endif %}

						{%- style -%}
							.videoBackground .imageBoxInfoDescription p {
								color: {{ block.settings.color_text }}!important;
							}
						{%- endstyle -%}

						{% if block.settings.text != blank %}
							
								{{ block.settings.text }}
							

						{% endif %}

						{% if block.settings.button_link != blank and block.settings.button_label != blank %}
							
								{{ block.settings.button_label | escape }}
							
						{% endif %}
					

				

		{% endif %}
	{%- endfor -%}

{% else %}
	 
      	This section doesn’t currently include any content. Add content to this section using the sidebar.
    

{%- endif -%}

{% schema %}
{
"name": {
		"en": "Video Background"
	},
	"class": "videoBackground",
	"max_blocks": 1,
	"blocks": [
		{
		"type": "video",
		"name": "Video",
		"settings": [
			{
				"type": "url",
				"id": "video_link",
				"label": {
				"en": "Video link"
				}
			},
			{
				"type": "image_picker",
				"id": "video_image",
				"label": {
				"en": "Cover image"
				}
			},
			{
				"type": "range",
				"id": "overlay_opacity",
				"label": {
					"en": "Overlay opacity"
				},
				"min": 0,
				"max": 99,
				"step": 1,
				"unit": {
					"en": "%"
				},
				"default": 0
			},
			{
				"type": "header",
				"content": {
					"en": "Text"
				}
			},
			{
				"type": "text",
				"id": "title",
				"label": {
					"en": "Heading"
				},
				"default": "Video slide"
			},
			{
				"type": "richtext",
				"id": "text",
				"label": {
					"en": "Description"
				},
				"default": {
					"en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"
				}
			},
			{
				"type": "color",
				"id": "color_text",
				"label": {
					"en": "Text color"
				},
				"default": "#ffffff"
			},
			{
				"type": "text",
				"id": "button_label",
				"label": {
					"en": "Button label"
				}
			},
			{
				"type": "url",
				"id": "button_link",
				"label": {
					"en": "Button link"
				}
			},
			{
				"type": "color",
				"id": "color_btn_bg",
				"label": {
					"en": "Background button color"
				},
				"default": "#ffffff"
			},
			{
				"type": "color",
				"id": "color_btn_text",
				"label": {
					"en": "Button text color"
				},
				"default": "#ffffff"
			}
		]
		},
		{
		"type": "image",
		"name": "Image",
		"settings": [
			{
				"type": "color",
				"id": "color_bg",
				"label": {
					"en": "Background color (optional)"
				},
				"default": "#16165b"
			},
			{
				"type": "image_picker",
				"id": "image_bg",
				"label": {
					"en": "or use an image (required)"
				}
			},
			{
				"type": "range",
				"id": "overlay_opacity",
				"label": {
					"en": "Overlay opacity"
				},
				"min": 0,
				"max": 99,
				"step": 1,
				"unit": {
					"en": "%"
				},
				"default": 0
			},
			{
				"type": "header",
				"content": {
					"en": "Text"
				}
			},
			{
				"type": "text",
				"id": "title",
				"default": "Image slide",
				"label": {
					"en": "Heading"
				}
			},
			{
				"type": "richtext",
				"id": "text",
				"label": {
					"en": "Description"
				},
				"default": {
					"en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"
				}
			},
			{
				"type": "color",
				"id": "color_text",
				"label": {
					"en": "Text color"
				},
				"default": "#ffffff"
			},
			{
				"type": "text",
				"id": "button_label",
				"label": {
					"en": "Button label"
				}
			},
			{
				"type": "url",
				"id": "button_link",
				"label": {
					"en": "Button link"
				}
			},
			{
				"type": "color",
				"id": "color_btn_bg",
				"label": {
					"en": "Background button color"
				},
				"default": "#ffffff"
			},
			{
				"type": "color",
				"id": "color_btn_text",
				"label": {
					"en": "Button text color"
				},
				"default": "#ffffff"
			}
		]
		}
	],
	"presets": [
		{
			"name": {
				"en": "Video Background"
			},
			"category": {
				"en": "Main"
			},
			"blocks": [
				{
					"type": "video"
				}
			]
		}
	]
}
{% endschema %}

Thank you.

2

Hey! You can do so easily by changing

into an tag and add the href-attribute.

From:

Into:

Don’t forget to change the closing tag of the

into . It was so hard to navigate so I didn’t copy the entire thing until the closing tag of that
.

Here’s a demo link: https://codepen.io/Mrunggol/pen/MWLGyZe
(I didn’t use liquid for the codepen, I just copied the HTML from your homepage then pasted it and modified it)

Let me know if it works for you.

3

Hi, it worked!

Thank you for the solution!

4

That’s great to hear! Glad I was able to help you out :smiley: