Verpackung ein youtube-video in ein statisches Bild "frame" und pflegen reaktionsschnell Weg Größenänderung

Habe ich das unten stehende Bild einer leeren Macbook.

Verpackung ein youtube-video in ein statisches Bild

Das Bild ist 1034 × 543.

Ich soll legen Sie ein youtube-video in der "grauen" Bereich des Bildschirms. Ich will es so scheinen, als ob die youtube-video-Wiedergabe auf dem laptop-Bildschirm.

Möchte ich auch das laptop-Bild /youtube-video zu skalieren, so dass, wenn die web-Seite auf einem tablet oder mobile-Ansicht, Bild-und video-shrink zu entsprechen.

Ich versuche, mit fitvid.js um dies zu erreichen, bin aber nicht mit dem Glück -- ich kann das video passen auf eine statische Größe ist, aber ich kann es nicht trotzdem passen perfekt auf die Größe, es verformt.

Unten ist meine aktuelle markup:

html:

<div class="col-sm-12">
  <div class="title">
    <h2>What's New</h2>
    <small>ASC Sneak Peak</small>
  </div>
  <div class="macbook-wrapper">
    <iframe width="715" height="402" src="//www.youtube.com/embed/**url**" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

SASS:

.macbook-wrapper{
  background: url('../img/content/home/macbook.png') no-repeat;

  .fluid-width-video-wrapper {
    width: 97.5%;
    background: #000;
  }
}
  • So etwas wie jsfiddle.net/41sdho4w ? Wollte nur sichergehen, dass ich deine Frage verstanden ordnungsgemäß vor dem posten eine Antwort.
  • genau. 😀
  • Genial, ich bin sicher es gibt eine Tonne von Möglichkeiten, es zu tun, aber dies ist, wie würde ich es angehen. @ Mein Kommentar, was ich sagen wollte, ist, dass Sie bauen konnte macbook um das iframe aus der CSS-Datei und habe diese Skala zu, ohne all die Positionierung und super genaue Polsterung.
InformationsquelleAutor Prefix | 2014-08-29
Schreibe einen Kommentar