Hauptanliegen: Eine Nutzerin möchte ein Video auf ihrer Shopify-Seite (Impulse Theme) um ca. 50% verkleinern, da es zu dominant wirkt.
Lösungsansätze:
transform: scale(0.5)-Eigenschaft wurde empfohlen und erfolgreich auf 0,7 skaliert umgesetztmargin-bottom und padding-bottom zu reduzieren, blieben erfolglosTechnische Erklärung: Das Video-iFrame wird zwar kleiner, aber das umgebende Section-Grid bleibt in der ursprünglichen Größe (hardcoded im Theme), wodurch der Leerraum entsteht.
Endergebnis:
Zusätzliche Empfehlung: Aus UX-Perspektive wirkt die Videogröße angemessen; Tracking der Video-Klicks könnte helfen, die tatsächliche Nutzerinteraktion zu bewerten.
Hallo zusammen,
kann mir jemand den css code verraten, um das Video auf meiner Seite ca. 50% kleiner anzeigen zu lassen? Ich habe sie mit dem Impulse Theme erstellt.
Es sieht sehr dominant aus auf der Seite und ich weiß nicht, wie ich es von der Darstellung/Format her kleiner bekomme.
Vielen Dank schon mal und liebe Grüße,
Silvi
Hey @Silvi18
Da du ein Bild deines Shop gepostet hast, kann ich dir helfen denn um das zu machen brauche ich einen Link zu deiner Page HMTL dafür, also haben wir Glück gehabt! 
Der Video HTML ist ja folgender:
<iframe src="//www.youtube.com/embed/Q-8Gjd6tG8U?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen="" teidentifier="8ps1529i1s6lssutf44"></iframe>
Bzw.:
Um das Video auf deiner Seite etwa 50% kleiner anzuzeigen, kannst du CSS verwenden, um die Größe des iFrames zu steuern. Eine effektive Methode, dies zu erreichen, ist die Verwendung von CSS-Eigenschaften wie width und height, um die Größe des iFrames anzupassen. Alternativ kannst du auch die transform-Eigenschaft verwenden, um den iFrame zu skalieren, was den Vorteil hat, dass das Video zentriert bleibt und du die Originalabmessungen des iFrames beibehalten kannst.
Hier ist ein Beispiel, wie du die Größe des Videos mit der transform-Eigenschaft im CSS EDITOR anpassen kannst:
.video-wrapper iframe {
/* Skaliert das Video auf 50% seiner ursprünglichen Größe */
transform: scale(0.5);
transform-origin: top left; /* Legt den Ursprung der Transformation fest */
}
Wenn du die Breite und Höhe direkt anpassen möchtest, sieht der CSS-Code folgendermaßen aus:
.video-wrapper iframe {
width: 425px; /* 50% von 850px */
height: 240px; /* 50% von 480px */
}
Wenn du stattdessen die direkte Methode bevorzugst, kannst du den style-Attribut des <video>-Elements ändern, um die Größe auf etwa 50% zu reduzieren. Du könntest den CSS-Code wie folgt anpassen:
.html5-video-container .video-stream.html5-main-video {
width: 437px; /* 50% von 874px */
height: 246px; /* 50% von 492px */
}
Wenn du die Transformationstechnik verwenden möchtest, um das Video zu skalieren, ohne direkt width und height zu ändern, kannst du den folgenden CSS-Code verwenden:
.html5-video-container .video-stream.html5-main-video {
/* Skaliert das Video auf 50% seiner ursprünglichen Größe */
transform: scale(0.5);
transform-origin: top left; /* Legt den Ursprung der Transformation fest */
}
Diese Methode hat den Vorteil, dass sie das Video relativ zu seinem ursprünglichen Punkt skaliert, was die Zentrierung und Platzierung des Videos erleichtern kann, besonders wenn es innerhalb eines Containers mit einer bestimmten Ausrichtung oder Positionierung platziert ist.
Hoffe das hilft dir weiter - lass wissen falls nicht!
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 
in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Hi Gabe,
besten Dank für deine professionelle Hilfe! Mega 
Ich hab es jetzt mit der transform-Eigenschaft hinbekommen und auf 0,7 skaliert. Jetzt passt es.
Noch eine Frage: jetzt hab ich unter dem Video (siehe: https://skindigo.com/pages/rohstoffe) sehr viel Abstand. Kann ich den noch geringer machen?
Und gerne noch ein paar Tipps zur Ostersuche. Darauf sind wir gar nicht gekommen 
LG, Silvi
Hey @Silvi18
Super freut mich! Bzgl. der Ostereiersuche als nettes Spiel in deinem Shop - hier ein kurzer Video von mir zu wie du Überraschungseier in deinem Shop verstecken kannst …
Um den leeren weißen Raum unter dem Video zu reduzieren, nachdem du das Video mithilfe der transform-Eigenschaft skaliert hast, kannst du versuchen, den äußeren Abstand (Margin) oder den inneren Abstand (Padding) der umgebenden <div>-Elemente anzupassen. Dies kann dazu beitragen, den ungenutzten Raum zu minimieren.
Da das Video in einem .video-wrapper innerhalb weiterer Container eingebettet ist, könntest du folgende CSS-Anpassungen vornehmen:
#shopify-section-template--15139233857718__featured_video_b9rNtU .video-wrapper {
margin-bottom: 0; /* Reduziert den unteren Abstand des Video-Wrappers */
}
.page-width {
padding-bottom: 0; /* Reduziert den inneren Abstand am unteren Rand des Containers */
}
Durch das Setzen des margin-bottom und padding-bottom auf 0 wird der Abstand direkt unter dem Video-Wrapper reduziert. Du musst eventuell mit diesen Werten experimentieren, um die perfekte Balance für deine Seite zu finden, da andere Stile, die von deinem Theme vorgegeben werden, ebenfalls eine Rolle spielen können.
Wenn du feststellst, dass es immer noch zu viel Leerraum gibt, kann es hilfreich sein, die Entwicklertools deines Browsers zu nutzen, um zu sehen, welche Elemente den zusätzlichen Platz beanspruchen. Manchmal können unsichtbare Container oder Elemente mit festen Höhen verantwortlich sein. In solchen Fällen kannst du gezielt die CSS-Eigenschaften dieser Elemente anpassen.
Super, herzlichen Dank! Da werd ich mich mal drum kümmern
Könntest du mir noch verraten, wie ich den Abstand unter dem Video (also zwischen Video und Section Divider-Linie) verringere?
Herzlichen Dank schon mal.
Silvi
Hey Silvi!
Ich habe dir etwas CSS dafür bereits oben schon geschickt falls du diesen noch nicht gesehen hast?
Besten Dank!
In der Tat hat es mir den unteren Teil der Nachricht vorher nicht angezeigt gehabt. Hab es jetzt noch mit ins CSS eingefügt, aber leider hat sich da nichts getan mit dem Abstand. Vielleicht mach ich irgendwas falsch?
Sorry bin hier absoluter newbie 
Hey @Silvi18
Da ich keinen Zugang zu deinem Admin habe, kann unser Support Team das 
als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme bekommst.
Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.
VG,
Mein Konto ist bereits authentifiziert und ich hab dem Support geschrieben 
Besten Dank für deine Hilfe!
Gerne und hat das geklappt?
Hi Gabe,
jetzt meld ich mich doch nochmal. Ich habe dem Support geschrieben und folgende Nachricht erhalten:
“Es ist wichtig zu klären, dass unser Team nicht in der Lage ist, sich mit codierungsbezogenen Anfragen zu befassen, da diese außerhalb des Umfangs unserer Support-Services liegen. Da Impulse ein von Dritten entwickeltes Thema ist, wird es nicht von unserem Team unterstützt.”
Jetzt weiß ich leider nicht, wie ich das Problem mit dem Abstand lösen kann?
Hast du noch eine Idee?
Liebe Grüße und schönen Abend noch,
Silvi
Hey Silvi! @Silvi18
Das Problem hier ist, dass du den Video iFrame mit dem bereits verwendeten CSS im Section kleiner gemacht hast, was dazu führt, dass der Video iFrame zwar in der Pixelgröße kleiner wird aber das Section Grid um den iFrame rum, gleich groß bleibt (da dieses ja im Theme ge-hardcoded ist) und daher der leere weiße Raum unterhalb des Videos entsteht.
Das einzige was mir einfällt, ist den CSS Code wieder rauszunehmen und den Video so zu lassen wie er war, in der normalen Größe (natural size). ODer eben eine(n) Programmierer:in in Auftrag stellen der/die einen in dein Theme Code wirft - gerne kann ich welche empfehlen!
MMn sieht das eigentlich ok aus so wie es war, und, tbh, sehe ich keinen großen Grund diesen Video iFrame kleiner zu machen. Für mich sieht es nicht zu “dominant” aus und man muss beispielsweise bei Vanity decisions vorsichtig sein, denn das kann uns oft zu komischen Entscheidungen treiben beim Bauen eines Webshops, oder auch andere Dinge die nicht unbedingt aus der UX Perspektive von Vorteil sind - ich weiß das am besten denn ich selber bin ein regelmäßiger Übeltäter in diesem Bereich!
Hoffe das hilft dir weiter - lass wissen falls nicht!
Okay, ich hab den Code jetzt wieder rausgenommen und das Video in der Originalgröße stehen lassen.
Danke deiner Sichtweise
Für mich sieht es persönlich immer noch zu groß aus im Vergleich zum Rest der Seite…schade, dass es da nicht eine einfache Funktion gibt, das Video in der gewünschten Formatgröße anzupassen. Das ist bei Wordpress z.B. ganz einfach.
Dann muss sich mein Auge wahrscheinlich einfach dran gewöhnen 
Trotzdem danke für deine ganze Unterstützung!
Ja, die Sections sind ziemlich ge-hardcoded. Der Zweck dahinter ist es dem User die Arbeit abzunehmen so dass man sich auf mehr wesentliche “Business” Dinge konzentrieren kann, wie das Aufbauen einer tollen Marketingstrategie usw.
Du kannst ja tracken wie viele der Besucher zum Shop in den Video klicken. Wir wissen aus Daten, dass Online Shopper nicht immer in Inhalte klicken wie Blogs und Videos usw. und stattdessen mehr in die Produkte selber. Du kannst aber gerne den YouTube Player API verwenden um Zahlen zu sammeln und in deinen Google Analytics Account zu analysieren.
Andere Formen der Visualisierung des Videos ausprobieren?
Wenn doch nicht so viele in den Video klicken, kannst du dir überlegen, den Video auf eine andere Art und Weise einzubinden, wie einen Link zu YT, oder den Video in einem “Video Hero” Section im Hintergrund loopen zu lassen, ohne Ton, aber mit einem Call To Action Button der über dem Video schwebt und der irgendwohin leitet wie YT oder zu einem Produkt usw.
Alles dir überlassen und das kreative Denken hat keine Grenzen!
Super Impulse
Besten Dank für alles und alles Gute
Absolut gerne!
