Ergebnis 1 bis 29 von 29

Thema: Untertitel für YouTube-Vdeo formatieren

  1. #1
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Frage Untertitel für YouTube-Vdeo formatieren

    Auf meiner Website habe ich ein paar YouTube-Videos eingebettet. Wie bei den Bildern auch, soll darunter kleingedruckt eine kurze Beschreibung erscheinen. Soweit so gut - erst versteckte sie sich nach dem Upgrade von 4.13.54 auf 5.3.x mittig hinter dem Video, dank "position" und "top" ist sie jetzt (wieder) jetzt exakt darunter platziert.

    Leider kann ich den Abstand zum jeweils nächstfolgenden Inhaltselement auf der Seite weder über "margin" noch über "padding" beeinflussen. (Beispiel: siehe https://a-klarinette.de/oelen, ganz unten)

    2025-08-13 16_57_05-Holz ölen - A-Klarinette.de – Mozilla Firefox.png

    Code:
    /* Videounterzeile/-beschriftung */
    #main .content-youtube figcaption {
        position: absolute;
        top: 100%;
        margin-bottom:1.5em;
        padding:3px;
        text-align:left;
        font: 90% AncizarSans,sans-serif;	
        color:#000;
        font-weight: 300;}
    Weiß jemand Rat?
    Freundliche Grüße: Achim H.

  2. #2
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    Auf meiner Website habe ich ein paar YouTube-Videos eingebettet. Wie bei den Bildern auch, soll darunter kleingedruckt eine kurze Beschreibung erscheinen. Soweit so gut - erst versteckte sie sich nach dem Upgrade von 4.13.54 auf 5.3.x mittig hinter dem Video, dank "position" und "top" ist sie jetzt (wieder) jetzt exakt darunter platziert.

    Leider kann ich den Abstand zum jeweils nächstfolgenden Inhaltselement auf der Seite weder über "margin" noch über "padding" beeinflussen. (Beispiel: siehe https://a-klarinette.de/oelen, ganz unten)

    2025-08-13 16_57_05-Holz ölen - A-Klarinette.de – Mozilla Firefox.png

    Code:
    /* Videounterzeile/-beschriftung */
    #main .content-youtube figcaption {
        position: absolute;
        top: 100%;
        margin-bottom:1.5em;
        padding:3px;
        text-align:left;
        font: 90% AncizarSans,sans-serif;	
        color:#000;
        font-weight: 300;}
    Weiß jemand Rat?
    Nimm das position absolute wieder raus und nutze mal folgendes Template:

    templates/content-element/_video.html.twig
    PHP-Code:
    {% extends "@Contao/content_element/_video.html.twig" %}

    {% use 
    "@Contao/component/_splash_screen.html.twig" %}

    {% 
    block content %}
        {% 
    set video_attributes attrs(video_attributes|default) %}

        {% if 
    as_editor_view %}
            <
    p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
        {% else %}
            <
    figure{{ video_attributes }}>
                {% if 
    splash_image %}
                    {{ 
    block('splash_screen_component') }}
                {% else %}
                    {% 
    block iframe %}
                        {% 
    set iframe_attrs attrs({widthheightsrcsource.urlallowfullscreentrue})
                            .
    addClass('aspect aspect--' aspect_ratioaspect_ratio)
                            .
    mergeWith(iframe_attrs|default)
                        %}
                        {% do 
    csp_source('frame-src'iframe_attrs.src) %}
                        <
    iframe{{ iframe_attrs }}></iframe>
                    {% 
    endblock %}
                {% endif %}

                {% 
    block video_caption %}
                    {% if 
    caption %}
                        <
    figcaption{{ attrs(video_caption_attributes|default) }}>
                            {{- 
    caption|insert_tag_raw -}}
                        </
    figcaption>
                    {% endif %}
                {% 
    endblock %}
            </
    figure>
        {% endif %}
    {% 
    endblock %} 
    Das setzt die "Aspect-Ratio" Klasse in das iframe, damit sollte es dann vermutlich nicht mehr zu dem Problem kommen und das alte Verhalten sollte so wieder hergestellt werden.
    Beachte bitte, dass dies nicht harmoniert, wenn ein "Splash Screen" aktiviert ist... für deinen Fall sollte es aber womöglich helfen.

    Auch empfehle ich dir den Einsatz eines Consent-Tools, da du für die Einbindung von YouTube, zumindest in Deutschland, eine Einwilligung geben musst.

    Die oveleon/contao-cookiebar kannst du hierbei verwenden und auch so einstellen, dass sie nicht immer aufgeht sondern nur beim YouTube Video angezeigt wird.

  3. #3
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Es tritt ein Script-Fehler auf, wenn ich das so mache. Die Log-Datei meint dazu:

    Code:
    [2025-08-13T18:55:36.327906+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:55:36.826001+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:55:36.951938+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:55:41.291512+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:55:41.682224+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:55:41.792812+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:56:30.362816+02:00] request.INFO: Matched route "tl_page.103". {"route":"tl_page.103","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.103","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.103","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/tutorials","method":"GET"} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
    [2025-08-13T18:56:30.698454+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
    [2025-08-13T18:56:30.840898+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
    [2025-08-13T18:56:35.957468+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:56:36.303604+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:56:36.398456+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:57:00.600821+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:57:00.952550+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    [2025-08-13T18:57:01.060934+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
    Freundliche Grüße: Achim H.

  4. #4
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    Es tritt ein Script-Fehler auf, wenn ich das so mache. Die Log-Datei meint dazu:

    Code:
    "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30."
    Du extendest hier mehrmals. Poste mal den Inhalt des verwendeten Templates (Ich hab das kurz getestet und es funktionierte so).
    Hast du den Cache danach auch geleert?

  5. #5
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Code:
    {% extends "@Contao/content_element/_video.html.twig" %}
    
    {#
      ** Add changes to the base template here. **
    
      Hint: Try adjusting blocks and attributes instead of
      overwriting the whole template. This way your version
      can remain compatible with future changes to the base
      template as well as adjustments made by extensions.
    
      Currently available blocks:
        "splash_screen_component",
        "splash_screen_button_content",
        "splash_screen_content", "splash_screen_script",
        "picture_component", "image", "sources", "source",
        "schema_org", "content", "iframe",
        "video_caption", "splash_screen_text",
        "headline_component", "headline_attributes",
        "headline_inner", "wrapper", "wrapper_tag",
        "attributes", "inner", "metadata", "style",
        "script"
    
      Example:
        {% block splash_screen_component %}
           {{ parent() }}
           My additional content for 'splash_screen_component'…
        {% endblock %}
    #}
    
    {% extends "@Contao/content_element/_video.html.twig" %}
    
    {% use "@Contao/component/_splash_screen.html.twig" %}
    
    {% block content %}
        {% set video_attributes = attrs(video_attributes|default) %}
    
        {% if as_editor_view %}
            <p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
        {% else %}
            <figure{{ video_attributes }}>
                {% if splash_image %}
                    {{ block('splash_screen_component') }}
                {% else %}
                    {% block iframe %}
                        {% set iframe_attrs = attrs({width, height, src: source.url, allowfullscreen: true})
                            .addClass('aspect aspect--' ~ aspect_ratio, aspect_ratio)
                            .mergeWith(iframe_attrs|default)
                        %}
                        {% do csp_source('frame-src', iframe_attrs.src) %}
                        <iframe{{ iframe_attrs }}></iframe>
                    {% endblock %}
                {% endif %}
    
                {% block video_caption %}
                    {% if caption %}
                        <figcaption{{ attrs(video_caption_attributes|default) }}>
                            {{- caption|insert_tag_raw -}}
                        </figcaption>
                    {% endif %}
                {% endblock %}
            </figure>
        {% endif %}
    {% endblock %}
    Freundliche Grüße: Achim H.

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Wie die Fehlermeldung schon sagt hast du mehrmals "extends" benutzt.
    » sponsor me via GitHub or Revolut

  7. #7
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Ich taste mich mit völlger Unkenntnis heran ... ja, das ist doppelt. Hab's einmal entfernt.

    Jetzt stimmt der Abstand (margin-top), aber es ist kein Video zu sehen.

    ---------------------------------------------------------------------------------------------------------------

    Zu den Cookies: Danke für den Hinweis. Allerdings habe ich "Die youtube-nocookie.com-Domain verwenden" aktiviert.
    Freundliche Grüße: Achim H.

  8. #8
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    aber es ist kein Video zu sehen
    Poste dein jetziges Template und das verwendete CSS

  9. #9
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Code:
    {% extends "@Contao/content_element/_video.html.twig" %}
    
    {% use "@Contao/component/_splash_screen.html.twig" %}
    
    {% block content %}
        {% set video_attributes = attrs(video_attributes|default) %}
        {% if as_editor_view %}
            <p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
        {% else %}
            <figure{{ video_attributes }}>
                {% if splash_image %}
                    {{ block('splash_screen_component') }}
                {% else %}
                    {% block iframe %}
                        {% set iframe_attrs = attrs({width, height, src: source.url, allowfullscreen: true})
                            .addClass('aspect aspect--' ~ aspect_ratio, aspect_ratio)
                            .mergeWith(iframe_attrs|default)
                        %}
                        {% do csp_source('frame-src', iframe_attrs.src) %}
                        <iframe{{ iframe_attrs }}></iframe>
                    {% endblock %}
                {% endif %}
                {% block video_caption %}
                    {% if caption %}
                        <figcaption{{ attrs(video_caption_attributes|default) }}>
                            {{- caption|insert_tag_raw -}}
                        </figcaption>
                    {% endif %}
                {% endblock %}
                
            </figure>
        {% endif %}
    {% endblock %}
    Code:
    /* Videounterzeile/-beschriftung */
    #main .content-youtube figcaption {
        /*position: absolute;*/
        top: 100%;
        margin-bottom:1em;
        padding: 5px;
        text-align:left;
        font: 90% AncizarSans,sans-serif;	
        color:#000;
    	font-weight: 300;
    }
    Geändert von Achim H. (13.08.2025 um 20:42 Uhr) Grund: CSS korrigiert
    Freundliche Grüße: Achim H.

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Warum brauchst du überhaupt eine Template Anpassung? Untertitel für YouTube Videos werden seit Contao 5.0.0 unterstützt. Ggf. solltest du dir für deine Custom Untertitel eine Migration schreiben.
    » sponsor me via GitHub or Revolut

  11. #11
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hast du danach den Cache gecleared? Das Video wird weiterhin nicht ausgegeben?

    Beim CSS für die Figcaption brauchts das `position: absolute` und `top: 100%` nicht mehr.

  12. #12
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Warum brauchst du überhaupt eine Template Anpassung? Untertitel für YouTube Videos werden seit Contao 5.0.0 unterstützt. Ggf. solltest du dir für deine Custom Untertitel eine Migration schreiben.
    Die eingestellte Aspect-Ratio Klasse liegt auf dem Figure in den video_attributes. Da hier aber noch der `padding-top` Hack für responsive-ratio aktiv ist, brauchts position absolute für die figcaption..

    Ist die Frage ob es hier ein Bug im Core (des Templates) ist oder/und dem derzeitgen Core CSS für Aspect-Ratio

  13. #13
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    ... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).
    Freundliche Grüße: Achim H.

  14. #14
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    ... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).
    Alles gut, übrigens ist der Contao-Slack doch schneller bei so einem Support https://contao.org/de/netzwerk -> Contao Slack.

    Ich hab dasselbe Template in meiner Dev-Instanz (mit deaktiviertem Twig Cache) erfolgreich testen können. Poste mal einen Link zur Seite, leere vorher auch den Cache.

  15. #15
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    ... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).
    Ich denke nicht, dass du hier irgendeine Template Anpassung brauchst - sondern nur eine CSS Anpassung.

    - - - Aktualisiert - - -

    Zitat Zitat von zoglo Beitrag anzeigen
    Alles gut, übrigens ist der Contao-Slack doch schneller bei so einem Support https://contao.org/de/netzwerk -> Contao Slack.
    Slack is not indexable.
    » sponsor me via GitHub or Revolut

  16. #16
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Ich denke nicht, dass du hier irgendeine Template Anpassung brauchst - sondern nur eine CSS Anpassung.
    Siehe https://community.contao.org/de/show...l=1#post597640

    Zitat Zitat von Spooky Beitrag anzeigen
    Slack is not indexable.
    That's true <3 #WhenFlarumMigration

  17. #17

  18. #18
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    @Achim

    Ich vermute, dass du hier vermutlich das responsive.css Framework aus deinem Layout entfernen solltest und dir entsprechend das Layouting selber mit CSS stylest für deine YouTube Videos:

    Wir reden hier von der folgenden CSS: https://github.com/contao-components...responsive.css
    Code:
    .responsive {
        position:relative;
        height:0;
    }
    Durch die Klasse .responsive wird die Höhe auf 0 gesetzt, ab da wirds kritisch. Das liegt auf dem figure, die figcaption ist natürlich innerhalb und erhält die Höhe nur noch durch das Seitenverhältnis.

    Ohne Templateanpassung und mit eigenem CSS kommst du aber zum Ziel. Meine Lösung war eher dafür gedacht, dass das Framework es für dich erledigt... Templateanpassungen sind aber nicht notwendig, wenn du CSS beherrschst.

    *Edit*

    Deine Videos sind da, die gepostete Lösung von mir passt aber nicht mit dem Framework... Also:

    • Template wieder entfernen
    • Im Layout die responsive.css entfernen aus den CSS-Frameworks
    • Eigenes CSS hinzufügen (Da captions ja nun neu sind)

  19. #19
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Jetzt wird's kompliziert.

    Code:
    .responsive
    taucht in meinem CSS-Universum überhaupt nicht auf.
    Freundliche Grüße: Achim H.

  20. #20
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Die aspect aspect--16:9 Klassen liegen hier auf dem falschen Element. Du scheinst hier ein angepasstes Template zu haben.
    » sponsor me via GitHub or Revolut

  21. #21
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Die aspect aspect--16:9 Klassen liegen hier auf dem falschen Element. Du scheinst hier ein angepasstes Template zu haben.
    @Spooky ... Es ist das angepasste Template welches ich gepostet habe, ja, es ist nicht korrekt

    Siehe https://community.contao.org/de/show...l=1#post597646

    ---

    • Template wieder entfernen
    • Im Layout die responsive.css entfernen aus den CSS-Frameworks
    • Eigenes CSS hinzufügen (Da captions ja nun neu sind)

  22. #22
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Ich habe halt das oben vorgeschlagene genommen.

    Wenn das nicht korrekt ist, ob ich dann ein korrektes bekommen könnte?
    Freundliche Grüße: Achim H.

  23. #23
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Wie schon erwähnt brauchst du für dein Vorhaben vermutlich kein angepasstes Template. Lösche das angepasste Template und fange nochmal von vorne an
    » sponsor me via GitHub or Revolut

  24. #24
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Standard

    Dann sieht' s halt weider wie am Anfang aus.

    So geht's nicht
    Code:
    /* Videounterzeile/-beschriftung */
    #main .content-youtube figcaption {
        position: absolute;
        top: 100%;
        margin-bottom:1em;
        padding: 5px;
        text-align:left;
        font: 90% AncizarSans,sans-serif;	
        color:#000;
    	font-weight: 300;
    }
    und so auch nicht (allerdings in Contao 4.13.54 noch einwandfrei):
    Code:
    /* Bildunterzeile/-beschriftung */
    #main figcaption {
        margin-bottom:1.5em;
        padding:5px;
        text-align:left;
        font: 90% AncizarSans,sans-serif;	
        color:#000;
        font-weight: 300;
    }
    Freundliche Grüße: Achim H.

  25. #25
    Contao-Urgestein
    Registriert seit
    24.02.2021.
    Beiträge
    1.792
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    Ich habe halt das oben vorgeschlagene genommen.

    Wenn das nicht korrekt ist, ob ich dann ein korrektes bekommen könnte?
    Siehe https://community.contao.org/de/show...l=1#post597651

    Falls du das CSS nicht selber schreiben kannst, dann empfehle ich die erstmal die Deaktivierung des "responsive-frameworks" innerhalb deines Layouts. Danach könntest du für dein Element und das IFrame aspect-ratio nutzen

  26. #26
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    Dann sieht' s halt weider wie am Anfang aus.
    Heißt was genau? Aus deinen vorherigen Posts bin ich mir nicht sicher, was du nun eigentlich haben möchtest.
    » sponsor me via GitHub or Revolut

  27. #27
    Contao-Nutzer Avatar von Achim H.
    Registriert seit
    04.04.2015.
    Ort
    Düsseldorf
    Beiträge
    158

    Daumen hoch

    Wie am Anfang - ohne Untertitel (bzw. derselbige hinter dem Video verborgen).
    -------------------------------------------------------------------------------------------
    Ich dank für Eure Zeit und Mühen - aber mit dem Upgrade und Relaunch meiner Websites möchte ich jetzt erst einmal fertig* sein, und da bei YouTube auch die Datenverarbeitungsfrage nicht ganz einfach ganz sauber zu lösen ist, habe ich mich jetzt gegen die Einbettung von Videos und für die Anzeige von Bildern mit "ganz normalen" externen Links entschieden. Da kann dann jeder beim Aufriuf von YouTube über die Verwendung seiner Daten entscheiden, und mein Layout ist "sauber".




    * Mit dem neuen Akkordeon-Element muss ich mich noch beizeiten befassen ;-)
    Freundliche Grüße: Achim H.

  28. #28
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    368

    Standard

    Moin,

    falls noch von Interesse, hier eine Möglichkeit Youtube-Video und Untertitel mit CSS-Grid zu platzieren.

    Bei diesem CSS-Snippet muss ein Seitenverhältnis angegeben werden, sonst greifen die CSS Anweisungen für asptect-ratio nicht, und es die Höhe des iframes passt sich nicht an.
    Außerdem wird der Wert für die Breite bei der Player-Größe ignoriert. Durch das CSS wird das iframe auf die Breite des Elternelements gezogen. Am besten lässt man Player-Größe leer und gibt nur ein Seitenverhältnis an.

    Den Abstand zum nachfolgenden Inhaltselement kann man dann entweder der figcaption geben, oder man gibt Margin und Padding direkt dem Youtube-Inhaltselement (siehe letze CSS Anweisung im Snippet).

    Code:
    /* content-youtube.css */
    
    .content-youtube > figure {
      display: grid;
      gap: 1rem; /* Abstand zwischen Untertitel und Video */
      place-items: center; /* Video und Untertitel zentriert */
      
      & iframe {
        width: 100%; /* Breite des iframes so breit wie das Elternelement */
      }
      
      /* alle Seitenverhältnisse aus den Einstellungen im Inhaltselement */
      &.aspect--16\:9 > iframe {
        aspect-ratio: 16/9;
      }
      
      &.aspect--16\:10 > iframe {
        aspect-ratio: 16/10;
      }
      
      &.aspect--21\:9 > iframe {
        aspect-ratio: 21/9;
      }
      
      &.aspect--4\:3 > iframe {
        aspect-ratio: 4/3;
      }
      
      &.aspect--3\:2 > iframe {
        aspect-ratio: 3/2;
      }
    
      /* Untertitel Schriftgröße und ggf. hübscher Zeilenumbruch */
      & > figcaption {
        font-size: .9rem;
        text-wrap: balance;
      }
    }
    
    /* margins und Paddings zu benachbarten Elementen z.B. so: */
    .content-youtube {
      margin-block-end: 2rem;
    }
    Gruß
    Mathias
    The idea is to die young as late as possible!

  29. #29
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    37.953
    Partner-ID
    10107

    Standard

    Zitat Zitat von Achim H. Beitrag anzeigen
    Wie am Anfang - ohne Untertitel (bzw. derselbige hinter dem Video verborgen).
    Das sollte sich ja mit einer CSS Anpassung einfach lösen lassen.
    » sponsor me via GitHub or Revolut

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •