Ergebnis 1 bis 8 von 8

Thema: CSS Responsive Video - Keine Anpassung möglich

  1. #1
    HTML Newbie
    Registriert seit
    11.10.2017
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Responsive Video - Keine Anpassung möglich

    Hallo alle zusammen!

    Ich bin recht neu in dem Forum und in der CSS Thematatik.

    Zu meinem Problem:

    Ich bekomme Youtube Videos auf meiner Website nicht auf die gewünschte Größe eingestellt.
    Laut meinem Code sehe ich keinen Fehler. Trotzdem springt das Video im Container immer auf 1920x1080px anstelle auf 560x315px.
    Wenn man den Browser verkleinert (auch bei Mobilen Devices), verkleinert sich das ganze wie es soll.
    Aber bei Full HD geht es auf maximum.

    Hier der CSS Code:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Und die HTML Einbindung:

    <div class="video-container"><iframe width="560" height="315" class="responsive-video" src="https://www.youtube.com/embed/YuzvVqfEiBk" frameborder="0" allowfullscreen></iframe></div>

    Wer Zeit hat, genauer zu schauen, hier meine Testseite:

    http://www.whitemountain-music.com/test/test.html

    Vielen Dank für eure Hilfe!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Was meinst Du denn, was width:100% und height:100% bewirkt?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    11.10.2017
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Wenn ich den Wert senke, wird das Video linksbündig.
    Wenn ich z.B. 25% bei beiden Werten eingebe, schrumpft das Video bei Browsern von 25% auf 0%, sobald man das Fenster verkleinert.
    Dementsprechend kann man nicht mehr deuten, dass es ein Video ist. Deswegen muss da denke ich 100% stehen.

    Online habe ich bisher keine anderen Meinungen gefunden.
    Ich denke eher, der Video Container ist das Problem (oder was auch immer).

    Aber danke fürs Feedback

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Pack das Video in einen Container, dem Du die Größe des Videos gibts ( 560x315 ) und setze den auf margin:0 auto;


    EDIT:
    Den Container hast ja schon: .video-container, denn kannst den auch anpassen. Nimm das padding-bottom raus, setze width und height, wie oben geschrieben und margin:0 auto;

    feddich
    Geändert von Arne Drews (11.10.2017 um 16:43 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    11.10.2017
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Habe ich gemacht.
    Ist zwar jetzt optisch korrekt, allerdings verkleinern sich die Videos nicht beim Browser verkleinern :-/

    .video-container {
    position: relative;
    padding-top: 0px;
    width: 560px;
    height: 315px;
    overflow: hidden;
    margin:0 auto;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
    }

  6. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.236
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Versuch das mal auf Flex umzubauen.

  7. #7
    HTML Newbie
    Registriert seit
    10.10.2017
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    verkleinert sich das ganze wie es soll.


    หีฟิต

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    11.10.2017
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Responsive Video - Keine Anpassung möglich

    Da bin ich in der Tat überfordert. Ich finde zwar Online was über Flex, aber ich bekomme es nicht hin.

Ähnliche Themen

  1. Responsive Buttons auf Video
    Von Yuyupie im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.01.2017, 15:36
  2. Responsive Design bei iPhone 6 nicht möglich
    Von Overtone im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 15.01.2015, 23:00
  3. Keine Neuanmeldung möglich
    Von panikerin im Forum Forum-Hilfe.de intern
    Antworten: 1
    Letzter Beitrag: 26.11.2007, 21:33
  4. Keine Einträge möglich
    Von UB im Forum Forum-Hilfe.de intern
    Antworten: 1
    Letzter Beitrag: 10.01.2007, 20:42
  5. Script Anpassung nicht möglich HILFE
    Von Greenhorn007 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 21.09.2006, 00:09

Stichworte

Berechtigungen

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