Modify the code of my video banner on the Dawn theme

[Julietteweb]

Hi there,

I found a code to add a video banner to my site using the Dawn theme, but I can't customize it the way I want.

After spending several hours searching the internet for lines of code, I found this site: https://boostifythemes.com/shopify-video-banner-section/

I created a new section (video.banner.liquid) in the theme code and inserted the code below.

In theme editing, I can't change the size of the title or the location of the text and button.
I'd like to be able to change them so that it looks like the screenshot (computer format) I've put at the bottom of my question.
I'd also like to be able to have two different banner videos on mobile and computer so that on the phone version I can put the video in another format I've created.

If you have any knowledge for this, it would be amazing !!

Thank you

{%- 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' %}
			<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">

				{%- if block.settings.video_link != blank -%}
					<div class="fullscreen-video-wrap">
						<video class="video-js" loop autoplay preload="none" muted playsinline
						poster="https:{{ block.settings.video_image | img_url: 'master' }}">
							<source src="{{ block.settings.video_link }}" type="video/mp4">
						</video>
					</div>
				{% endif %}

				<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
				<div class="videoBoxInfo">
					{% if block.settings.title != blank %}
						<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
							{{ block.settings.title | escape }}
						</h1>
					{% endif %}

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

					{% if block.settings.text != blank %}
						<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
							{{ block.settings.text }}
						</div>
					{% endif %}

					{% if block.settings.button_link != blank and block.settings.button_label != blank %}
						<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
							{{ block.settings.button_label | escape }}
						</a>
					{% endif %}
				</div>
			</div>
			{% else %}
				<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">

					<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

					<div class="imageBoxInfo">
						{% if block.settings.title != blank %}
							<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
								{{ block.settings.title | escape }}
							</h1>
						{% endif %}

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

						{% if block.settings.text != blank %}
							<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
								{{ block.settings.text }}
							</div>
						{% endif %}

						{% if block.settings.button_link != blank and block.settings.button_label != blank %}
							<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
								{{ block.settings.button_label | escape }}
							</a>
						{% endif %}
					</div>
				</div>
		{% endif %}
	{%- endfor -%}

{% else %}
	 <div class="placeholderNoblocks">
      	This section doesn’t currently include any content. Add content to this section using the sidebar.
    </div>
{%- endif -%}

<style>
	body.template-index .main-content .videoBackground {
		margin-top: -55px;
	}
	.videoBackground {
		position: relative;
	}
	.videoBackground .fullscreen-video-wrap {
		height: 100%;
		left: 0;
		min-width: 100%;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.videoBackground .fullscreen-video-wrap .video-js {
		height: 100%;
		left: 0;
		min-height: 100%;
		min-width: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.videoBackground .fullscreen-video-wrap video {
		min-height: 100%;
		min-width: 100%;
		object-fit: cover;
	}
	.videoBackground .videoBox {
		align-items: center;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 500px;
		padding: 100px 20px 80px;
		position: relative;
      	max-height: 800px;
        height: calc(100vh - 165px);
	}
	.videoBackground .imageBox {
		align-items: center;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		height: auto;
		justify-content: flex-end;
		min-height: calc(100vh - 165px);
		padding: 100px 20px 80px;
		position: relative;
	}
	.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
		text-align: center;
		z-index: 2;
	}
	.videoBackground .overlay {
		background: #000;
		bottom: 0;
		content: "";
		display: block;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
	}
	.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
		-moz-appearance: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-appearance: none;
		-webkit-user-select: none;
		appearance: none;
		border-radius: 2px;
		border: 1px solid transparent;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		font-style: normal;
		font-weight: 800;
		letter-spacing: 0.06em;
		margin-top: 20px;
		padding: 8px 15px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		user-select: none;
		vertical-align: middle;
		white-space: normal;
		width: auto;
	}
	.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
		color: #FFF;
		font-size: 30px;
		line-height: 40px;
	}
	.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
		margin: 0 auto;
		max-width: 500px;
	}
	.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
		font-size: 18px;
		line-height: 28px;
	}
	.videoBackground .placeholderNoblocks {
		margin: 0 auto;
		max-width: 500px;
		text-align: center;
	}
    @media screen and (max-width: 767px) {
		body.template-index .main-content .videoBackground {
			margin-top: -35px;
		}
		.videoBackground .fullscreen-video-wrap {
			z-index: 3;
		}
		.videoBackground .videoBox {
			padding: 0;
          	height: 100%;
          	min-height: 500px;
          	position: relative;
      	}
		.videoBackground .fullscreen-video-wrap {
			min-height: 300px;
			position: relative;
		}
		.videoBackground .videoBoxInfo {
			padding: 40px 20px;
			width: 100%;
    		background: #000;
		}
    }
</style>

{% 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": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
				}
			},
			{
				"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": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
				}
			},
			{
				"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 %}

 

 

 

[Moeed]

Hey @Julietteweb 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.videoBackground .videoBoxInfo {
    text-align: -webkit-left !important;
}
h1.videoBoxInfoTitle {
    font-size: 70px !important;
    font-weight: bold !important;
    width: 600px !important;
    line-height: 1.1 !important;
}
div#video_EEztnD {
    margin: 0 !important;
}
.videoBoxInfo {
    margin-right: auto !important;
    margin-bottom: auto !important;
    margin-top: auto !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Julietteweb]

Hello @Moeed,

Thank you for your help ! It works for the desktop's video banner. 

Would you know how I could display this one only on desktop and add an other video for the mobile version as I've shown on the screenshot I put on my question ? 

I want to put a video in another format that I've worked on specifically for the mobile format, so that it takes up the full size of the screen on the homepage, and I'd like the text and button to be displayed as follows:

[Moeed]

Hey @Julietteweb 

For that, custom coding would be required in your video section file, if you're not familiar with coding then I suggest you to hire a Shopify developer who can help you out with that. Feel free to let me know if you want me to help you out!

Best Regards,

Moeed

[Arif_Shopidevs · Accepted solution]

Custly coding way is so much difficult to manage desktop and mobile wise things. you can try the popular shopify app for video slier or banner https://apps.shopify.com/revolution-slider. it will help you easily to achieve what you like 

[Julietteweb]

Hello @Arif_Shopidevs,

Thank you for taking the time to reply.

I actually removed the code from my site and replaced it with an application (Section Store: https://apps.shopify.com/section-factory?locale=fr&st_source=autocomplete)

I added the video banner section by implementing a CSS directly from the theme customization to have two versions, one that displays only on computer and the other that displays only on mobile.

The CSS works well, but I'm not sure I wrote it as well as I could.

Should I write CSS in a better way?

@media screen and (max-width: 750px) {
   {
    display: none;
  }
}

@media screen and (min-width: 750px) {
   {
    display: none;
  }
}

Thank you !