ilch Forum » Ilch CMS 2.X » Allgemein » Youtube "responsive" Boxen

Geschlossen
  1. Mi. 12.04.2017 11:16 Uhr #1
    User Pic
    BEE MAYA Mitglied
    Registriert seit
    17.03.2017
    Beiträge
    101
    Beitragswertungen
    1 Beitragspunkte
    Moin,

    ich hätte mal eine Frage lächeln
    Das neue cms ist ja als responsiv Webdesign angelegt, das heißt die Größe der Webseite ändert sich automatisch auf die jeweiligen Bildschirm Größe. In der Version 1.1 war es durch anlegen einer Box (z.B. für Youtube Videos) über iframe nicht nötig, das sich die Fenstergrößen automatisch ändern, hier war ja eine feste Fenstergröße der Box definiert. Welche Möglichkeiten gibt es in 2.0.0 solche Boxen anzulegen? Man benötigt hierzu ja css (Div Container) um das iFrame anzusteuern (automatische Breite etc.). Wo kann ich diese css Schnitzel hinterlegen? In der Box selbst ist dies ja nicht möglich. Oder mache ich da etwas verkehrt?
    Wir haben zusätzliche Boxen angelegt mit einen "dicord" widget und unserer Facebookseite auch diese sind ja ebenfalls mit fester Größe eingebunden und das Bild ist natürlich je nach Bildschirmgröße nicht besonders ansprechend lächeln

    Hat hierzu vielleicht jemand einen Lösungsansatz?

    Gruß
    BEE


    verwendete ilch Version: 2.0 (alpha)

    betroffene Homepage: purple-heart.epizy.com/
    Alle wege führen nach Rom..
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 12.04.2017 12:17 Uhr #2
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Poste doch mal den Code von deiner Youtube box, ich kann Sie auf der HP nicht sehen.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 12.04.2017 13:11 Uhr #3
    User Pic
    BEE MAYA Mitglied
    Registriert seit
    17.03.2017
    Beiträge
    101
    Beitragswertungen
    1 Beitragspunkte
    Also normal sieht ja der Code für die Version 1.1 so aus

    ?
    1
    <center><iframe width="185" height="98" src="https://www.youtube.com/embed/bjgJSlVZzMk?autoplay=0&loop=0&playlist=bjgJSlVZzMk&showinfo=0" frameborder="0" allowfullscreen></iframe></center>


    über width und hight wird die Größe des iframes definiert.

    Jetzt müsste man ja mit einen Div Container
    ?
    1
    2
    <div class="responsive-video">
    <iframe width="185" height="98" src="https://www.youtube.com/embed/bjgJSlVZzMk?autoplay=0&loop=0&playlist=bjgJSlVZzMk&showinfo=0" frameborder="0" allowfullscreen></iframe></div>


    css
    ?
    1
    2
    3
    4
    5
    6
    7
    .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


    so in der Art einbinden

    Oder liege ich da falsch?


    Zuletzt modifiziert von BEE MAYA am 12.04.2017 - 13:12:36


    Zuletzt modifiziert von Lord|Schirmer am 12.04.2017 - 15:51:56
    Alle wege führen nach Rom..
    0 Mitglieder finden den Beitrag gut.
  4. Mi. 12.04.2017 13:18 Uhr #4
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Also du Definierst im Div Container eine breite von 100% aber das iFrame hat eine feste breite von 185px siehe width="185". mach da mal raus 100% oder lass es komplett raus.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 12.04.2017 13:32 Uhr #5
    User Pic
    BEE MAYA Mitglied
    Registriert seit
    17.03.2017
    Beiträge
    101
    Beitragswertungen
    1 Beitragspunkte
    Okay.. aber wenn ich die beiden dinge so in der Box anlege.. nimmt er mir den css Code nicht.. das ist ja mein Problem. Muss ich den css Code irgendwo anders hinterlegen?

    Ich leg das mal schnell an

    So jetzt müsstest sehen was ich meine.. die Box ist auf der Seite


    Zuletzt modifiziert von BEE MAYA am 12.04.2017 - 13:33:26


    Zuletzt modifiziert von BEE MAYA am 12.04.2017 - 13:36:45
    Alle wege führen nach Rom..
    0 Mitglieder finden den Beitrag gut.
  6. Mi. 12.04.2017 13:34 Uhr #6
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Du kanst es in deiner Style.css einbinden oder einfach ganz oben von der Datei so :

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    </style>
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  7. Mi. 12.04.2017 13:45 Uhr #7
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Musst auch position: absolute; entfernen.

    Könntest einfach in der Benutzerdefinierte CSS (Backend -> Einstellungen
    -> Benutzerdefinierte CSS) folgendes eingeben

    ?
    1
    2
    3
    4
    .responsive-video iframe {
        position: relative;
        width: 100%;
    }



    Zuletzt modifiziert von Siggi am 12.04.2017 - 13:52:55
    Wie poste ich falsch?
    0 Mitglieder finden den Beitrag gut.
  8. Mi. 12.04.2017 13:53 Uhr #8
    User Pic
    BEE MAYA Mitglied
    Registriert seit
    17.03.2017
    Beiträge
    101
    Beitragswertungen
    1 Beitragspunkte
    Okay.. super

    Hiermit funzt es

    ?
    1
    2
    3
    4
    5
    6
    <div class="responsive-video"><iframe allowfullscreen="" frameborder="0" height="98" src="https://www.youtube.com/embed/bjgJSlVZzMk?autoplay=0&amp;loop=0&amp;playlist=bjgJSlVZzMk&amp;showinfo=0" width="185"></iframe></div>
    <style type="text/css">.responsive-video iframe {
    width: 100%;
    height: auto;
    }
    </style>


    Danke für Eure Hilfe!


    Zuletzt modifiziert von Lord|Schirmer am 12.04.2017 - 15:51:25
    Alle wege führen nach Rom..
    0 Mitglieder finden den Beitrag gut.
  9. Mi. 12.04.2017 13:55 Uhr #9
    User Pic
    BEE MAYA Mitglied
    Registriert seit
    17.03.2017
    Beiträge
    101
    Beitragswertungen
    1 Beitragspunkte
    Ah im Backend kann ich das eingeben..

    Super Danke

    Hier kann ich aber nur eine css hinterlegen.. Oder?


    Zuletzt modifiziert von BEE MAYA am 12.04.2017 - 14:00:56
    Alle wege führen nach Rom..
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 12.04.2017 15:02 Uhr #10
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Ja im Backend ist nur dafür gedacht um so kleine CSS Schnipsel zu hinterlegen.

    Für größere Änderungen an der CSS schreibt man denke eine eigene aber in diesen Fall sollte es doch hilfreich sein
    Wie poste ich falsch?
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten