• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Überlappung von HTML5 Videos mit dem

B

BMicraft

Neues Mitglied
Ich habe auf meiner Homepage ein kleines HTML5-Video (nur eine sehr kurze) Animation mit Blender, aber egal.
Mein Problem: Das Video überlappt sich etwas mit dem restlichen Inhalt der Seite.
Es sollte das übergeordnete DIV in der Höhe erweitern, statt dessen überlappt es aber mit dem nächsten DIV, ohne dessen Text zu überdecken.
Hier sehr ihr, wie das aussieht ...
Sorry, falls ich in falschen Kategorie bin, denn ich war nicht sicher, ob es an html oder css liegt.

Hier mein Code ;)

HTML-Code:
HTML: 
<html><head>
        <meta charset="ISO-8859-1">
<meta name="description" content="A website from me">
<meta name="author" content="B-Micraft">
<meta name="keywords" content="Minecraft; BMicraft; B-Micraft">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de); My brain :D">
<meta http-equiv="refresh" content="900; URL=">

<link href="files/style.css" type="text/css" rel="stylesheet">
<link href="files/logo/bmicraft_favicon.png" type="image/png" rel="icon">
<link href="files/logo/bmicraft_favicon.png" type="image/png" rel="shortcut icon">        <title>

  
Home - BMicraft</title>
    <style type="text/css"></style></head>

    <body sip-shortcut-listen="true">
        <div id="Top">
            <div id="navigation">
    <ul class="nav_scroll_down">
    <li id="nav">

            <a href="/?p=default" title="Zurück auf die Startseite">Home</a>
            <a href="/?p=/minecraft/pocket_edition/" title="">MCPE-Server</a>
            <a href="/?p=/hotspot/" title="">PC als Hotspot</a>
        </li>
</ul>
</div>

<div id="header">
    <h1>B-Micraft</h1>
<h2>  hosted by ms5.eu</h2></div>        </div>

        <div id="content">
            <div id="main">
              

<article>
    <h>BMicraft.tk Video</h>
    <p><video width="80%" controls="" autobuffer="" poster="/MEDIA/videos/bmicraft-tk.jpg">
  <source src="/MEDIA/videos/bmicraft-tk.ogg" type="video/ogg">
  </video></p><p>Es tut mir Leid, aber dein Browser unterstuetzt dieses Format nicht.
  <a href="/MEDIA/videos/bmicraft-tk.ogg">HIER&gt;</a> kannst du das Video herunterladen, um es dir mit dem Media-Player deiner Wahl anzusehen.</p>
<p></p>
</article>


<article>
    <h>Text</h>
    <p>Sehr langer, hierfür unnötiger Text</p>
</article>

            </div>
            <div id="byside">
              
            <div id="article_space"><article><h>NOT your ads</h><br><p>Hier koennte ihr Werbung NICHT stehen ...</p></article></div>
            <div id="article_space"><article><h>My ads</h><br><p>Hier steht meine Werbung</p></article></div>
                </div>
        </div>
        <div id="footer">
            <footer>
    <p>Copyright by Bernhard000 (@[USER=29983]BMicraft[/USER]) 2013</p>
</footer>        </div>
  
</body></html>
CSS-Code:
Code: 
* {
    padding: 0px;
    margin: 0px;
    font-family: Verdana, sans-serif;
}

li {list-style: none;}
A:link {text-decoration: none; color: #0000FF;}
A:visited {text-decoration: none; color: #0000FF;}
A:active {text-decoration: none; color:  #FF0000;}
A:hover {text-decoration: underline}

#header {
    margin-top: 60px;
    margin-right: 3%;
    margin-left: 3%;
    height: 100px;
    background-color: #5555FF;
    border-radius: 10px;
}

#header h1 {
    font-family: Verdana;
    font-style: italic;
    font-size: 30pt;
    text-shadow: white -4px 5px 8px;
    padding-left: 45px;
    padding-top: 15px;
    color: white;
}

#header h2 {
    font-family: Verdana;
    font-style: italic;
    font-size: 12pt;
    text-shadow: #89BDFF 0px 0px 5px;
    padding-left: 80px;
    padding-top: 5px;
    color: #89BDFF;
}

#navigation {
    background: linear-gradient(to bottom, rgba(99,147,193,1) 0%,rgba(47,121,191,1) 90%,rgba(207,231,250,0) 100%);
    position: fixed; top: 0px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: auto;

    animation-name: navdown;
    animation-iteration-count: once;
    animation-timing-function: ease-in;
    animation-duration: 3s;

    -moz-animation-name: navdown;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 3s;

    -webkit-animation-name: navdown;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 3s;
}

.nav_scroll_down {
    @keyframes navdown {
        0% { top:-100px; }
        100% { top: 0; }
    }

    @-moz-keyframes navdown {
        0% { top:-100px; }
        100% { top: 0; }
    }

    @-webkit-keyframes navdown {
        0% { top:-100px; }
        100% { top: 0; }
    }
}

#navigation li a {
    position: relative;
    text-align: center;
    display: block;
    float: left;
    list-style: none;
    padding: 0px;
    padding-right: 15px;
    padding-left: 15px;
    line-height: 50px;
    text-decoration: none;
    font-size: large;
    margin: 0px;
    cursor: auto;
    color: white;
}

#navigation li a:hover {
    background: linear-gradient(to bottom, rgba(99,147,193,1) 0%,rgba(207,231,250,1) 90%,rgba(255,255,255,0) 100%);
    text-shadow: 0px;
}

body {
    width: 100%;
    background-size:100% 100%;
    background-attachment: fixed;
    background-color: #FAFAFA;
    background: linear-gradient(to bottom, #cfe7fa 0%,#6393c1 100%) no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
}

#content {
    margin: 4%;
    padding: 5%;
    padding-top: 15px;
}

#content #main {
    /* width: 84%; */
    width: 75%;
    float: left;
}

#content #main article {
    color: #262626;
    border: gray 4px groove;
    padding: 20px;
    margin-top: auto;
    margin-bottom: 25px;
    background-color: rgba(255, 255, 255, 0.7);
}

#content #main article h {
    font-weight: bold;
    text-align: left;
}

#content #main article p {
    font-size: 10pt;
    line-height: 16pt;
}
#content #byside  {
    text-align: center;
    height: auto;
    width: 20%;
    margin-left: 10px;
    color: #808080;
    float: right;
}
#content #byside #article_space {
    padding-bottom: 10px;
}
#content #byside #article_space article {
    background-color: rgba(128, 128, 128, .2);
    border-radius: 10px;
    color: #333333;
    padding: 15px;
}
#content #byside #article_space article h {
    margin-bottom: 0px;
    font-weight: 600;
}
#content #byside #article_space article p {
    margin-bottom: 5px;
    font-weight: 100;
}

video {
    width: 320;
    height: 180;
    float: left;
    border-radius: 5px;
}

#footer {
    clear: both;
    padding-top: 10px;
    padding-bottom: 5px;
    background: linear-gradient(to bottom,#6393c1 0%,#86B6E0 5px,#ffffff 100%);
}
#footer footer {
    margin: 3%;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
    background-color: #5555FF;
    color: #FAFAFA;
    border-radius: 15px;
}
    #checkbox_av {
        display: none;
    }
    #spoiler_av {
        cursor: pointer;
    }
    #spoiler {
        height:0px;
        font-size:0px;
        line-height:0px;
        transition:height 2s, font-size 2s, line-height 2s;
        display:block;
    }
    #checkbox_av:checked ~ #spoiler {
        height:auto;
        font-size: 10pt;
        line-height: 16px;
    }

Ich weiß echt nicht, was ich falsch gemacht habe :-/
Ich habe auch schon im Internet gesucht, aber es scheint, als ob ich der Einzige wäre.

Vielen Dank im Voraus ... ich verlasse mich auf euch, dass einer etwas weiß ;)
 
Werbung:
scbawik schrieb:
style.css > Zeile 173 ;)

oder nach dem <video> ein <br style="clear:left">
Zum Vergrößern anklicken....
Danke für den Hinweis, aber steht das irgendwo? Ich habe überall gesucht :(

EDIT:
So probiert ... ich hatte ganz vergessen und übersehen, dass ich noch ein Video Element in css hatte :-/
habe es auskommentiert, nun funktioniert es wieder, nur eines beunruhigt mich:
Ich habe gelesen, dass man den Text im Video-Element nur sieht, wenn man das Video nicht abspielen kann, aber ich sehe ihn trotzdem (Chrome, Version 31.0.1650.63 m).
Stimmt da was nicht?
 
Zuletzt bearbeitet:
Werbung:
Du hast den Text ja nicht IM Video-Element. Würde aber ohnehin nicht funktionieren, denn:

Der Text würde nur angezeigt, wenn das Video-Element nicht unterstützt wird. Chrome unterstützt aber <video>, nur eben die Quelle (<source>) nicht.
 
scbawik schrieb:
Du hast den Text ja nicht IM Video-Element. Würde aber ohnehin nicht funktionieren, denn:

Der Text würde nur angezeigt, wenn das Video-Element nicht unterstützt wird. Chrome unterstützt aber <video>, nur eben die Quelle (<source>) nicht.
Zum Vergrößern anklicken....
Der Text wird aber angezeigt, obwohl das Video abspielbar ist ...
 
Werbung:
BMicraft schrieb:
Ich verstehe nicht was du meinst.
Ich dachte ein Browser der das Element nicht kennt nimmt einfach den Text und fertig, jeder Browser der es kennt, zeigt statt dessen einfach das Video
Zum Vergrößern anklicken....

ja, aber du hast nicht:
Code: 
<video><p>fallback</p></video>
sondern
Code: 
<video></video><p>fallback</p>

----

Außerdem jeder Browser der zwar das Video-Element kennt, nicht aber OGG-Videos (Also alle neuen Browser außer Firefox) zeigt dann zwar den Video-Player an, kann das Video selbst aber nicht abspielen.

Würde dir deshalb zu .h264 (mp4) raten, da dies unter Windows von allen relevanten Browsern unterstützt wird (seit neuem auch Firefox), unter Mac von allen relevanten (außer Firefox), von allen Smartphones (Android, iOS, WP8, …) und für alle restlichen Browser auch noch Flash.

Firefox wird meiner Meinung nach über kurz oder lang aussterben, da er meist nur noch von OpenSource-Hippies und DAUs benutzt wird, denen noch kein anderer Browser installiert wurde.
 
Zuletzt bearbeitet:
scbawik schrieb:
ja, aber du hast nicht:
Code: 
<video><p>fallback</p></video>
sondern
Code: 
<video></video><p>fallback</p>
----

Außerdem jeder Browser der zwar das Video-Element kennt, nicht aber OGG-Videos (Also alle neuen Browser außer Firefox) zeigt zwar den Video-Player an, kann es aber nicht abspielen.
Code: 
<video><p>fallback</p></video>
Zum Vergrößern anklicken....
Ich dachte ich hätte es reingeschrieben ;)
UND: Ich habe jetzt ogg/theora, mp4/3gp(p), h264/mpeg-4
damit läuft es nur in IE nicht

EDIT:
Der Text steht im Video-Element:
HTML: 
<video width="80%" controls autobuffer poster="/MEDIA/videos/bmicraft-tk.jpg">
  <source src="/MEDIA/videos/bmicraft-tk.mp4" type="video/mp4">
  <source src="/MEDIA/videos/bmicraft-tk.h264" type="video/h264">
  <source src="/MEDIA/videos/bmicraft-tk.ogg" type="video/ogg">
  <p>Es tut mir Leid, aber dein Browser unterstuetzt dieses Format nicht.
  <a href="/MEDIA/videos/bmicraft-tk.ogg">HIER</a> kannst du das Video herunterladen, um es dir mit dem Media-Player deiner Wahl anzusehen.</p>
</video>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben