Wie kann ich ein eingebettetes video auf-oben auf ein Bild in HTML/CSS?

So, ich bin versucht, zu erstellen eine einfache Schichtung-Technik, indem Sie ein Bild hinter dem ein video in html/css. Geben Sie den video-Bereich einige Bedeutung und hintergrund-Stil.

Hier ein photoshop-mockup von dem, was ich versuche zu erreichen.

http://s8.postimg.org/tl749vxvp/example.jpg

HTML

 div id= "background">
 img src="images/imgc.jpg" class="stretch" alt="image"
 *Video embedding goes here*

CSS

.stretch {
    width : 100%;
    height: auto;%;
}

#background {
    position: relative ;
}

#wrapper {
   background-size: 100% auto;
}
InformationsquelleAutor hduncan | 2013-11-20
  1. 0

    Müssen Sie, um den Mittelpunkt der video-player-div über das Bild(oder vorzugsweise ein div mit einem Hintergrundbild). Hier einige html:

    <html>
    <head>
        <!-- Flowplayer js and css -->
    </head>
    <body>
        <div style="width:100%; height:100%; background-image:url('path/to/your/image.png');">
            <div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div>
        </div>
    </body>
</html>

    Hinweis: beachten Sie, dass dieses css:

    width:600px;
height:400px;
position:absolute;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-200px

    macht ein div von 600px x 400px und Zentren innerhalb des Eltern-div. Wenn Sie müssen, ändern Sie die Höhe auf 800px zum Beispiel, ändern Sie die margin-top auf 1/2 der Betrag, in diesem Fall -400px

    Sollte ich noch erwähnen, dass es verschiedene css-Optionen für das Hintergrundbild des main-div, über Sie hier Lesen: http://www.w3schools.com/cssref/css3_pr_background.asp. Möchten Sie vielleicht Blick auf background-size:enthalten

    Nachdem Sie das div zentriert über dem Bild, wie gewünscht, Folgen Sie einfach den Anweisungen hier ( http://flash.flowplayer.org/documentation/installation/index.html ), um Ihre video-Wiedergabe mit flowplayer.

    InformationsquelleAutor Tom G
  2. 1

    Die einfachste Methode wäre, das video in ein div und div die CSS-Eigenschaft background-image das Bild, das Sie versuchen, zu verwenden:

    HTML:

    <div class="film-background">
    *Video embedding goes here*   
</div>

    CSS:

    .film-background {
    background-image: url('url of your film image');
    background-repeat: no-repeat;
}

    ODER verwenden Sie absolute Positionierung und z-index, und der Stil angewendet, um das Bild anstelle der div-container:

    HTML

    <div>
    <img src="img link" class="film-background">
    *Video embedding goes here*   
</div>

    CSS

    .film-background {
   z-index: -1;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}
    InformationsquelleAutor Jerreck
  3. 0

    Ich würde auf der z-index, damit können Sie um die vertikale Stapelung

    Finden Sie unter: http://html.net/tutorials/css/lesson15.php

    und

    http://css-tricks.com/almanac/properties/z/z-index/

    InformationsquelleAutor
Schreibe einen Kommentar