VIdeo Image für Desktop und Mobile definieren

[StudioSicily]

Hallo,

ich habe folgenden Code im Prestige 2.0 Theme eingebunden um ein Header Video abzuspielen. Das funktioniert soweit auch alles sehr gut. Im Code ist auch ein Cover Image vorgesehen welches gezeigt wird bis der Film geladen ist. Nun möchte ich dieses Cover Image aber für Desktop und Mobile je in 16:9 und in 9:16 anzeigen lassen. Dafür habe ich bereits folgenden Code Schnipsel integriert und nun kann ich im Theme auch ein Cover Image Mobile hochladen. 

{
"type": "image_picker",
"id": "video_image_mobile",
"label": {
"en": "Cover image mobile"
}
},

Jetzt müsste dieses Cover Image Mobile aber auch noch angesprochen werden wenn jemand mit einem Mobilgerät auf den Shop kommt. Könnte mir dabei jemand helfen? Und noch eine grundsätzliche Frage: würdet ihr überhaupt aus Pagespeed-Aspekten für Mobile user ein Video laden? Viele Homepages haben das ja nur für Desktop User.

Viele Grüße und vielen Dank schon vorab

Flo

Hier noch der gesamte Code der Section:

Spoiler

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

[byteriver]

Mit Shopzugriff würden wir dieses Problem schnell beheben können. In Bezug auf PageSpeed solltest du dir vorab keine Gedanken machen. Baue erst den Shop so das dieser gut konvertiert, anschließend kannst du dich immer noch auf die Reduktion von Apps oder die Komprimierung von Images kümmern.