Embedding Vimeo Video in einem PNG-Bild

Question

Ich versuche, ein bestimmtes Video in einem PNG-Bild eines iPhone zu spielen. Das iPhone dient als Rahmen für das Video. Ich konnte dies mit diesem CSS-Code erreichen:

 #phone_container { 
      width: 343px; 
      /* Adjust Phone image width */ 
      height: 663px; 
      /* Adjust Phone image height */ 
      position: relative; 
     } 

     #phone_container:after { 
      content: ''; 
      display: block; 
      background: url('iphone png link') no-repeat top left transparent; 
      width: 100%; 
      height: 100%; 
      left: 0px; 
      top: 0px; 
      position: absolute; 
      z-index: 10; 
     } 
     #video-placeholder { 
      position: absolute; 
      top: 125px; 
      /* Adjust top position */ 
      left: 55px; 
      /* Adjust left position */ 
      z-index: 5; 
     } 

Ich war auch dies mit HTML-Code zu erreichen Lage:

 <div class="row demo-video"> 
      <div class="col-md-5 left-side" id="phone_container"> 
      <div> 
       <iframe id="video-placeholder" src="Video Link" width="270" height="464" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
      </div> 
      </div> 

Obwohl es völlig in Ordnung funktioniert, das einzige Problem ist, dass seit die z-index der iframe ist kleiner als das Bild. Die Vimeo-Player-Steuerung funktioniert nicht. Ich habe versucht, die z-index der Player-Steuerelemente höher als die des iPhone, aber es funktioniert immer noch nicht. Es reagiert auch nicht. Wie behebe ich dieses Problem? Irgendwelche Vorschläge?

Answer 1

Erstellen Sie ein div Element und setzen Sie die Attribute width und height in CSS. Dann wenden Sie die background-image für diese div. Dann können Sie versuchen, die Vimeo-Video innerhalb dieser div einzubetten:

<div class="vimeo-video"> 
<!-- vimeo embed link with appropriate width and height //--> 
</div> 

hinzufügen CSS wie folgt aus:

.vimeo-video { 
    background-image: url('link-to-png.png'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    padding-top: /* play around with this to fit the video */; 
    padding-bottom: /* play around with this to fit the video */; 
    padding-left: /* play around with this to fit the video */; 
    padding-right: /* play around with this to fit the video */; 
} 

Halten padding Werte in Prozent ein Responsive Design zu ermöglichen.