Video verschiebt seine Position wenn der Browser verkleinert wird

heiko-hartung · 28. September 2014

Zitat

Hallo

ich wollte ein Video in eine Webseite in einen Rahmen plazieren.

Leider hab ich da ein Problem. Wenn ich die Webseite im Vollbild aufrufe sind der Rahmen und das Video genau mittig,

wie hier auf dem Bild zu sehen " http://heiko1972.dd-dns.de/hartung/vollbild.jpg ".

Wenn der Browser nicht im Vollbild ist ist der Rahmen immer noch in der
Mitte, aber das Video hat sich nach rechts verschoben wie hier zu sehen "
http://heiko1972.dd-dns.de/hartung/halbbild.jpg ".

Der HTML Code sieht im Moment so aus " http://heiko1972.dd-dns.de/hartung/htmlcode.jpg ".

Vieleicht kann mir einer helfen oder ein Tipp geben. Das wäre sehr schön.

Alles anzeigen

</article>

wolf · 28. September 2014

Willkommen

Also, wenn du einfach das Video UND den Rahmen immer gleich behandeltst.. wird auch alles klappen..
Das mit den non breaking space's (  ) für Design ist eine Unart aus dem letzten Jahrhundert, tut weh und wird heute nichtmehr praktiziert!

Zuerst mal eine Standartstruktur herstellen:

HTML

<!doctype html>
<html>
    <head>
        <title>Unsere Hochzeit</title>
        <meta charset="utf-8">
        <style>
            body{
                background: url('sand.jpg');
            }
            /* hier die video/img styles */
        </style>
    </head>
    <body>
        <img src="Bilderrahmen.jpg">
        <video>
            <!-- Source's -->
            In ihrem Browser wird leider kein Videoformat unterstützt.
        </video>
    </body>
</html>

Alles anzeigen

Dann zum Mittig rücken..:

Option A -> Seitlich immer in der Mitte

CSS

video,img{
    /* das ganze mal frei beweglich machen */
    display: block;
}
video{
    width: 400px;
    margin: auto;
}
img{
    /* Ausgegangen der Rahmen hat eine Breite von 30px */
    width: 460px;
    margin: auto;
}

Alles anzeigen

Option B -> fester Abstand von Links

CSS

video,img{
    /* das ganze mal frei beweglich machen */
    display: block;
}
video{
    margin-left: 300px;
    width: 400px;
}
img{
    /* Ausgegangen der Rahmen hat eine Breite von 30px */
    margin-left: 270px;
    width: 460px;
}

Alles anzeigen

Option C-> gleiches Ergebniss wie wie bei A (sollte zumindest ) ( A ist vorzuziehen )

CSS

video,img{
    /* das ganze mal frei beweglich machen */
    display: block;
}
video{
    width: 400px;
    /* Abstand links setzt sich aus 50% bildchirmbreite - der Hälfte vom Video zusammen */
    margin-left: calc(50% - 200px);
}
img{
    /* Ausgegangen der Rahmen hat eine Breite von 30px (2 * 30 = 60)*/
    width: 460px;
    /* Abstand links setzt sich aus 50% bildchirmbreite - der Hälfte vom Rahmen zusammen */
    margin-left: calc(50% - 230px);
}

Alles anzeigen

Um etwas immer mittig im Fenster zu positionieren gibt's einen Trick.. man muss aber feste Breite und Höhe für das Element haben...
Option D -> Im Fenster immer Mittig

CSS

video,img{
    /* das ganze mal frei beweglich machen */
    display: block;
}
video{
    width: 400px;
    height: 250px;




    /* Im Fenster Mittig Platzieren */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
img{
    width: 460px;
    height: 310px;




    /* Im Fenster Mittig Platzieren */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;   
}

Alles anzeigen

Hoffe das richtige ist dabei..

heiko-hartung · 29. September 2014

Hallo wolf,
Vielen Dank für deine Hilfe bei meinem Problem. Das mit der Positionierung hat auch super geklappt, aber leider wurde das Video nicht mehr abgespielt.
Deswegen hab ich das Video in Flash umgewandelt und da klappt es, das der Rahmen und das Video sich nicht verschieben.
So sieht der HTML Code jetzt aus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>erster Hochzeitstag</title>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
</head>

</body>

</html>

APH · 29. September 2014

@ Wolf und andere Profis :

Zitat von wolf

[...]

Dann zum Mittig rücken..:

Option A -> Seitlich immer in der Mitte

CSS

video,img{
    /* das ganze mal frei beweglich machen */
    display: block;
}
video{
    width: 400px;
    margin: auto;
}
img{
    /* Ausgegangen der Rahmen hat eine Breite von 30px */
    width: 460px;
    margin: auto;
}

Alles anzeigen

[...]

Alles anzeigen

Funktioniert das mit horizontal in der Mitte auch folgender Maßen?:

CSS

* {
margin: 0px;
padding: 0px;
}




/* [...] */




#container {
display: block;
width: 778px;
margin: auto;
}

Alles anzeigen

Oder muss ich das anders codieren?

mfG APH

wolf · 29. September 2014

Merkzettel zur Horizontalen Mitte:

Feste Breite
Display block
Horizontaler Margin (zweiter wert) auto

Merkzettel zur Absoluten Mitte

Feste Breite
Feste Höhe
Display block
Horizontaler Margin (zweiter wert) auto
Position absolute
Left 0
Top 0
Right 0
Bottom 0

Zur 'festen' Breite/Höhe -> dass dürfen auch % Werte sein, aber kein auto..!

APH d.h. ja es geht genau so

Video verschiebt seine Position wenn der Browser verkleinert wird

Jetzt mitmachen!

Teilen