Wie man Bild hinter eingebetteten youtube-iframe

ich würde gerne eine Bild hinter meinem youtube-iframe. Das Bild als visuellen Rahmen um das youtube-Fenster. Ich habe verschiedene Methoden probiert, aber entweder beide Elemente wo platziert nach einander, oder das iframe wurde in Position relativ zur Fenstergröße des Browsers. Beide Elemente sitzen in einer Tabelle. Ich will das youtube Fenster sitzen etwa in der Mitte des hintergrund Bild und nichts sollte setzen Sie die beiden Elemente voneinander entfernt sind (wie das ändern der Fenstergröße des browser etc.) Außerdem wäre es ganz nett, um eine benutzerdefinierte Vorschau-Bild für das video statt der youtube-Fenster, bis es geklickt (und möglich, setzen Sie die custom picture-zurück in den Ort, wenn das youtube-video wurde beobachtet).

InformationsquelleAutor Dan Forum an der Isar | 2014-08-30
  1. 3

    Set background-image hinter Ihrem Youtube - iframe und JavaScript für benutzerdefinierte Vorschau-Bild.

    VERSUCHEN - DEMO

    HTML:

    <div id="background-video">
    <div onclick="play();" id="vidwrap"></div>
</div>

<!-- <iframe width="480" height="360" src="[YouTube Video URL]?autoplay=1" frameborder="0"> -->

<script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>

    CSS:

    #background-video {

    /* Your background image */

    background-image: url('http://placehold.it/580x460');

    background-repeat: no-repeat;
    padding: 50px;
}

#vidwrap {

    /* Your thumbnail image */

    background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    background-repeat: no-repeat;
    width:480px;
    height:360px;
    cursor:pointer;
}
    • Weißt du, wie ich wäre in der Lage, implementieren diese in react.js?
    InformationsquelleAutor Anonymous
  2. 0

    Haben Sie schon versucht, um Ihre youtube-iframe in einen container, und legen Sie das Bild als hintergrund-Bild von diesem container? Wie diese:

    <div class="youtube">
 <-- youtube iframe or target here -->
</div>

    und css:

    div.youtube {
 background: url('url-of-your-image.png')
 padding: 50px; //adjust as needed
}
    InformationsquelleAutor matthias_h
Schreibe einen Kommentar