Beiträge von TOK-P8

  • Top Responsive - Logo verschieben + zweites Logo

    Guten Abend aus Wien!

    Mein neues Projekt verwendet Top Responsive. Nun habe ich neben dem Logotype auch ein Logomark in derselben Zeile unter zu bringen. Meine Frage: Schaffe ich das ohne Programmierung (die ich nicht beherrsche...)?


    Im Konkreten:

    • Neupositionierung des Logos (Verschiebung nach links)
    • Einblenden einer zweiten Grafik (rechts)
    • Beim Scrollen soll nur die Logotype (=Schriftzug ArtChains) links vom Menü angezeigt werden, also so wie standardmäßig im Layout vorgesehen

    Das sollte so aussehen:

    Ich habe sehr lange im Forum gestöbert, den Banner Bereich ausprobiert usw., aber leider komme ich auf keinen grünen Zweig.

    Danke für eure Unterstützung!

    Gregor

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Servus, ich hatte einen Weg gefunden, das Widget Video wie von ZP empfohlen zu nutzen, aber das ist nun die eigentliche und sehr präzise Antwort auf meine ursprüngliche Frage - besten Dank! Lustigerweise waren es genau deine Referenz-Seiten, die ich verwendete, um im aktuellen Projekt vor der Entscheidung für die Umsetzung zu zeigen, was andere im Kunst/Künstlerbereich schon mit ZP gebaut haben. Kam gut an, jetzt muss ich schauen, wie die Anforderungen der Grafikerin erfülle.

    Danke nochmal und Grüße aus Wien,

    Gregor

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Servus, ich hatte zuletzt beide Varianten im Test verwendet. Nachdem nun mit dem Widget und dem verpflichtenden Startbild alles funktioniert, werde ich dieses einsetzen und auf der Testseite ist es aktuell auch so drauf.

    Zwei Punkte sind nicht perfekt:

    Der Player zeigt auf PC Browsern (nicht auf Smartphones) einen feinen schwarzen Rand und ist minimal abgerundet, passt also in der Desktopdarstellung nicht 100-prozentig zu den Bildern darüber und darunter. Das sieht man aber erst nach dem ersten Abspielen des Videos - das Startbild ist scharfkantig ohne Rand.

    Weiters muss man die Bildbreite des Startbildes bewusst auf die Standard-Spaltenbreite setzen, sonst übersteuert das Video (dieses ist breiter - 1280 statt 890) die sonst automatisch auf Spaltenbreite gesetzte Bildbreite und plötzlich ist das Startbild so breit wie das Video. Mit beiden Punkten kann ich leben.

    LG, Gregor

    Nachtrag: Hab gerade gesehen, dass ich im WWW nicht mehr aktualisiert hatte, nachdem es letztlich funktionierte...

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    So, hab's doch gleich ausprobiert und es funktioniert fast:

    Mit gewähltem Vorschaubild wird das Bild (und nach dem Starten des Players auch dieser) in der richtigen Breite dargestellt. Aber nur so lange, als man das Browserfenster nicht auf die Minimalbreite reduziert - da "springt" die Breite des Videofensters und es erscheint wieder der bemängelte Rand. Ich nehme an, dass ich die CSS Klasse nicht richtig definiert habe - ich habe einfach ihr <style> Segment unter Einstellungen in das Feld CSS hineinkopiert, da fehlt nehme ich an das Rundherum. Und genau da enden meine Kenntnisse...

    Bitte mich hier noch hoch zu beten, danke, Gregor

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Hallo Maik,

    die Videos werden 1280x720 groß sein. Und ja, bis auf den Rand in der Hochformat Darstellung, der dir auch aufgefallen ist (siehe Screenshots) tut das Widget grundsätzlich, was es soll. Ich denke, es schaltet unterhalb einer bestimmten Bildschirmbreite um und genau dort entsteht dann plötzlich ein Rand. Das wird wohl nur ZP bereinigen können. Daher die Idee mit dem Elastic Video. Das funktioniert in Demoumgebungen astrein, wenn man die CSS Klassen wie vorgegeben definiert. Aber ZP ist ein Baukasten und ich traue mir nicht zu, hier einzugreifen.

    Gregor

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Hier ein paar Screenshots zur Verdeutlichung. Das Widget verhält sich grundsätzlich so wie ich es brauche, nur in der Hochformat-Darstellung auf Smartphones (=häufigster Anwendungsfall) passt die Breite nicht:

    iPhone8, Safari (Initialaufruf ohne Startbild, Hochformat):

    iPhone8, Safari (nach Durchlauf des Videos ohne Startbild, Hochformat):

    iPhone8, Safari (nach Durchlauf des Videos ohne Startbild, Querformat):

    Samsung Galaxy, Chrome (nach Durchlauf des Videos ohne Startbild, Hochformat):

    Samsung Galaxy, Chrome (nach Durchlauf des Videos ohne Startbild, Querformat):

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Hallo und danke für die schnelle Reaktion! Hier der Code:

    Code
    <div class="elastic-video-wrapper">
<div class="elastic-video">
<iframe
src="http://teichmann.wien/media/files/produce.mp4"
width="890" height=500 frameborder="0">
Your browser does not support the video tag.
</iframe>
</div>
</div>

    Die Inline CSS Eintragung lautet:

    Code
    max-width: 100%; height: auto;

    Ich habe heute nochmal nachgelesen und festgestellt, dass die elastische Skalierung insbesondere darauf beruht, dass man dem "äußeren Container" entsprechende Eigenschaften verpasst. Ich glaube, genau das fehlt bei mir.

    LG, Gregor

  • "Elastic Video" im Widget "Quelltext" oder Alternativlösung möglich?

    Guten Abend!

    Dies ist mein erster Beitrag, nachdem ich nun zwei Tage erfolglos versuchte, das nachfolgende Problem zu lösen.

    Vorab ein großes Lob an das Team! Ich hatte mich nach langer Recherche für die Business Edition des ZP entschieden. Als bei der Online Bestellung ein Fehler auftrat griff ich zum Telefon und: Hatte den Boss persönlich am Rohr! Der löste das Problem unbürokratisch, ich konnte prompt loslegen und hatte nach wenigen Tagen den ersten klassischen Webauftritt erfolgreich fertig gestellt. Dabei halfen auch viele der Forumsbeiträge - danke an alle!

    Das Problem:

    Auf der neuen Website (responsive) sollen Texte, Bilder und Videos mit künstlerischem Inhalt im selben look & feel dargeboten werden. Texte und Bilder sind kein Problem, die Videos wie befürchtet allerdings. Aus gleich mehreren Gründen verwende ich Youtube & Co. nicht, d.h. meine Einbindung basiert aktuell auf einer Hinterlegung der Videodateien am Webserver und dem Aufruf von <video> in "Quelltext Widgets", wie im Forum mehrfach beschrieben. Das funktioniert technisch, sieht aber je nach Skalierung, Browser und Endgerät teilweise recht unterschiedlich aus. Um ein annähernd gleichartiges Verhalten zu erreichen, möchte ich folgendes sicherstellen:

    1. horizontal zentrierte Positionierung des Players
      (unabhängig vom Endgerät und auch davon, ob darüber ein Ein- oder Mehrspalten-Design verwendet wird)
    2. Maximalbreite bei Desktopdarstellung=Kopfbildbreite
    3. lineares Skalieren (Breite und Höhe) des Videoplayers
      (analog zu jenem bei Texten und Bildern)

    Dass das gewünschte Verhalten offenbar einfach erreicht werden kann (wenn man weiß, was man tut), beweisen zahlreiche Beiträge im Netz (siehe z.B. https://www.elmastudio.de/css-tipp-einge…gns-optimieren/ bzw. das Beispielvideo unter https://webdesignerwall.com/demo/elastic-v…tml5-video.html)

    Das Ergebnis meiner eigenen Mühen findet sich auf einer Testseite unter http://www.teichmann.wien.

    • Einbindung eigenes Video
    • darunter Einbindung Vimeo-Player
      (analog zum o.a. Demovideo)
    • darunter Einbindung zweier klassisches Bildelemente
      (um das gewünschte Verhalten deutlich zu machen)

    Eigentlich funktioniert es weitestgehend wie erhofft, nur skaliert das Widget "Quelltext" in der Höhe nicht, sondern bleibt statisch. Am iPhone ist das Vorschaubild des Videos zu klein, das denke ich bekommt man mit einem Vorschaubild hin.

    Ich freue mich auf ihren/euren Input zur Lösung!


    Danke im Voraus und herzliche Grüße aus Wien,

    Gregor Teichmann