[Erledigt] Video im Bootstrap 3 Eyecatcher plazieren

Hallo und guten Tag,

ich verwende Bootstrap 3. Wie im Video von Thomas beschrieben habe ich über den HTML-Code das Youtube-Video auch im Eyecatcher eingefügt. Es wird nur leider an der falschen Stelle eingeblendet.

Wie kann ich erreichen, dass das Video exakt an der Stelle eingeblendet wird, wo es sein soll?

Beste Grüße

DiDu

Mit Informationen geizt du nicht unbedingt

anbei bild mit eyeycatcher mit eingeblendetem Video.

Viele Grüße

DiDu

sorry, habe bild vergessen

 

Du kannst die Positionierung per HTML oder dem Editor verändern. Im meinem Screenshot habe ich das Video per iFrame einfach per Editor zentriert.

 Mix aus HTML und Editor

 Ergebnis aus HTML-Mix

vielen Dank.

Jetzt bin ich genau so schlau wie vorher. Dieser Antwort hätte es so nicht bedurft.

In HTML oder Editor bearbeiten? Wie , wo , was??

Es gibt eben "Grünschnäbel" (mit über 70Jahren) die diese Änderungen nicht beherrschen
und sich mit dem "bearbeiten" eben schwer tun.

Ich denke es wäre dann jedoch in einem Forum korrekter, wenn man
einfach schreiben würde, löse ein Ticket à 39,99€ (oder mehr??) und dir kann geholfen werden.

Habe eigentlich gedacht, dass in einem Forum auf andere Art und Weise geholfen wird.
Um des Helfens willen.
Da dies bisher auch von mir so wahrgenommen wurde, war ich und werde auch in Zukunft
gerne bereit sein, dies mit einer Spende anzuerkennen.

Na ja, trotzdem viele Grüße

DiDu

Sorry, ich kann gerade nicht nachvollziehen warum du wie eine Rakete losgehst? (In der Kürze liegt die Würze. Und wenn ich eins nicht werde, dann ist es Schriftsteller und das obwohl ich auch gerne einmal ein Buch in die Hand nehme.)

Was ich eigentlich sagen wollte ist dass im Kurztext auch HTML, aber auch der interne Editor genutzt werden kann, also beides gleichzeitig. Ein Screenshot des Dialogs habe ich angehangen, ich dachte das wäre aussagekräftig genug. Öffne diesen „Listenelement bearbeiten” Dialog, und gebe dort Kurztext ein. Dort kannst du dann den Text zentrieren oder auch rechtsbündig ausrichten.

von einem Raketenstart bin ich weit entfernt......

in dem "Listenelement bearbeiten” Dialog, habe ich den youtube code eingetragen. Dadurch wird auch im eyecatcher das video angezeigt.

Dass ich dann dort zentriert, links, rechts etc. auswählen kann habe ich begriffen.

Meine Frage war jedoch, ob es eine Möglichkeit gibt (HTML?? wie z.B. bei einem Imagemap), das Video auf dem eyecatcher so zu verschieben. dass es egal an welchem Punkt, auf dem eyecatcher angezeigt wird. Also nicht nur zentriert, etc.. Siehe mein Bild. 

Beste Grüße
DiDu

Die Positionierung des Textes usw erfolgt absolut an der unteren Kante der Slideshow mit einem inneren Abstand von 15px. Man müßte also zunächst entweder die Datei css.tpl anpassen oder im Head in einer Style-Anweisung Folgendes hinzufügen:

1
2
3

#eyecatcher .summary {
   bottom: auto; top: 0; padding: 0;
}

Somit können Elemente innerhalb des Kurztextes nun von der oberen, linken Kante aus positioniert werden, hier ein Beispiel für den Kurztext:

1

<span style="display: block; position: absolute; top: 50px; left: 25px"><iframe width="320" height="180" src="https://www.youtube-nocookie.com/embed/pycUWLI0yHY" frameborder="0" allowfullscreen></iframe></span>

Vielen Dank.

habe dies so ausgeführt.

Ergebnis als Bild anbei.

Ist der Eintrag im head-bereich so richtig, oder was fehlt?

Beste Grüße

DiDu

Das im Zitat von mir rot markierte bedeutet folgendes:

<style type="text/css">
	#eyecatcher .summary {
		bottom: auto; top: 0; padding: 0;
	}
</style>

Korrekt Volker, ich vermute DiDu hat bereits Styleanpassungen im Head per

1
2
3
4

<style type="text/css">
...
...
</style>

eingefügt. Daher habe ich mich auf die Anweisung beschränkt.

hallo und vielen Dank.

nachdem meine seite nach eingabe nicht mehr angezeigt wurde, habe ich beim end-style noch / eingefügt. Ich hoffe das war richtig. Seite wird nun wieder angezeigt.

Leider aber das Video im Eyecatcher immer noch nicht. Wenn ich nur das von youtube vorgegebene <iframe....> verwende, wird das Video im Eyecatcher angezeigt.

Habe die werte bei top und left auch verändert. Leider kein Erfolg.

Anbei die screenshots von Webeigenschaften und von Listenelement.

Viele Grüße
DiDu

 

 

Probiere es im Head-Bereich bitte einmal mit:

1
2
3
4
5
6
7
8

<style type="text/css">
	#eyecatcher .container {
		position: static;
	}
	#eyecatcher .summary {
		bottom: auto; top: 0; padding: 0;
	}
</style>

Damit sollte die absolute Positionierung des Videos möglich sein (ausgehend vom obersten, linken Punkt).

Moin,

keine Ahnung auf was sich das position: absolute referenziert - zumal habe ich es online nicht überprüft. Interessenhalber wäre die Idee mit einem position: relative auch denkbar ...

Wie dem auch sei - ein kleiner Fehlerteufel hat sich in der CSS-Anweisung eingeschlichen --> es fehlt ein unscheinbarer Semikolon nach dem left:25px:

<span style="display: block; position: absolute; top: 50px; left: 25px"><iframe ...

 Korrekt wäre:

<span style="display: block; position: absolute; top: 50px; left: 25px;"><iframe ...

Bye !

CSS-Minifier würden das Semikolon an dieser Stelle entfernen, da es nicht notwendig ist, und unnötige Bytes produziert.

... muss zugeben, dass das mögliche Weglassen des letzten Semikolons, mir neu war. Gut zu wissen !

Hallo an Alle,

jetzt ist alles ok. Vielen, vielen Dank.

Es ist ja noch nicht Weihnachten, aber als Anerkennung gibt's schon jetzt eine kleine Spende.

Viele Grüße
DiDu

Hallo und guten Tag,

jetzt habe ich doch noch eine Frage zu diesem Thema:

auf meinem Laptop und meinem PC wird das Video im Eyecatcher angezeigt.

Auf meinen Smartphones (Samsung S6edge+ und S4) jedoch nicht.
Auch wenn ich unter Kurztext nur den Youtube Code verwende, also ohne <span style.....>.
Egal in welcher Größe und an welcher Stelle (links, zentriert....) das Video eingestellt wird.

Bitte nochmal um Hilfe.

Beste Grüße

DiDu

Dann gib doch mal bitte einen Link zur entsprechenden Seite an.

Die Beschreibung der Slideshow wird auf kleinen Geräte automatisch ausgeblendet da die Boostrap Klasse .hidden-xs mitgegeben wird. Das heißt auf Geräten mit einer kleineren Weite als 768px wird die Beschreibung automatisch entfernt.

Und da ist nicht's zu machen??

Viele Grüße
DiDu

Auf meinem Zettel für das nächste Update habe ich mir eine Option zum An- und Abschalten vermerkt, ansonsten kannst du auch in der Datei /classes/plugins/ngpluginlayout/styles/bootstrap/tpl/layout.tpl in Zeile 136 nach

1

<div class="summary hidden-xs {$gridClass}12">

suchen und dort hidden-xs entfernen.

Vielen Dank!

Viele Grüße
DiDu