2017-06-12 23 views
0

Ich habe dieses Beispiel:Wie füge ich ein Video in einen Rahmen ein?

link

Code:

.container { 
 
    position: relative; 
 
} 
 

 
.embed-container { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    max-width: 1062px; 
 
} 
 

 
iframe { 
 
    width: 100%; 
 
    max-width: 1062px; 
 
}
<div class="container"> 
 
    <img src="https://www.weltpixel.com/pub/media/wysiwyg/Magento_2_Theme_Pearl_Demo_9.png" alt="Magento 2 Theme Demo 6"> 
 

 

 
    <div class='embed-container'><iframe src="https://www.youtube.com/embed/OUGB5dqKgpE?autoplay=1&loop=1&cc_load_policy=1rel=0&amp;controls=0&amp;showinfo=0&playlist=OUGB5dqKgpE" frameborder="0" allowfullscreen></iframe></div> 
 
</div> 
 
</div>

Ich will das Video in diesem Rahmen setzen und unten, wie im Beispiel reagieren . Wie kann ich den Artikel dort positionieren, wo ich ihn haben möchte?

Können Sie mir bitte helfen, eine Lösung zu finden?

Vielen Dank im Voraus!

example

Antwort

0

Sie Stil wie pro Schnipsel ändern kann ich zur Verfügung gestellt:

.container { 
 
    position: relative; 
 
} 
 

 
.embed-container { 
 
    width:40%; 
 
    position:absolute; 
 
    top:290px; 
 
    left:270px; 
 
    max-width:1062px; 
 
} 
 

 
iframe { 
 
    width: 100%; 
 
    max-width: 1062px; 
 
}
<div class="container"> 
 
    <img src="https://www.weltpixel.com/pub/media/wysiwyg/Magento_2_Theme_Pearl_Demo_9.png" alt="Magento 2 Theme Demo 6"> 
 

 

 
    <div class='embed-container'><iframe src="https://www.youtube.com/embed/OUGB5dqKgpE?autoplay=1&loop=1&cc_load_policy=1rel=0&amp;controls=0&amp;showinfo=0&playlist=OUGB5dqKgpE" frameborder="0" allowfullscreen></iframe></div> 
 
</div> 
 
</div>

Verwandte Themen