FROM CACHE - de_header

VIdeo Image für Desktop und Mobile definieren

StudioSicily
Tourist
3 0 1
‎04-17-2022 12:39 PM

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 %}

 

 

146 Aufrufe
Beitrag melden
1 ANTWORT 1
Klondev
Shopify Partner
689 82 270
‎04-18-2022 04:22 AM

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.

Stephan | Co-Founder @ Klondev Automation GmbH
- War meine Antwort hilfreich? Dann freu' ich mich über ein Like
- Wurde deine Frage beantwortet? Dann markiere gerne meine Antwort als Akzeptierte Lösung
- Hier findest du unser Profil und unseren Kontakt

139 Aufrufe
0 Likes
Beitrag melden
Top-Mitwirkende
Alle anzeigen

Community Blog Artikel

Buyer Trust 101.png
Buyer Trust 101 - Der erste Eindruck zählt um Vertrauen aufzubauen

In diesem Leitartikel werden wir erläutern, warum es wichtig ist, dein Shop als vertrauens...

By Kai Oct 25, 2023
shutterstock_785222245 Cropped.jpg
Ein Webinar zum Thema „Wie führe ich einen Flash-Verkauf in Shopify durch?“

Dieser Blog-Beitrag ist eine Zusammenfassung des Webinars Vorbereitung auf BFCM: ein Webi...

By Jacqui Oct 10, 2023
help us to help you.png
Helfen Sie Uns, Ihnen Zu Helfen!

Unten sind ein paar wichtige Tipps, die man beachten sollte, wenn man ein neues Thema in d...

By Gabe Oct 6, 2023
Allgemeine Geschäftsbedingungen Datenschutz Impressum