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.
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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie vermitteln ein paar Tricks mit Polsterung und Prozentsätze, so könnte man es skalieren entsprechend. Grundsätzlich ist die Einrichtung eines container, der rein % Basis, mit einer absolut-position iframe, entsprechend skaliert, um die container.
HTML
CSS
Würden Sie brauchen nur zu addieren
box-sizing: border-box;
und einigepadding
position der iframe innerhalb des Bildschirms. Check it out http://jsfiddle.net/41sdho4w/Nehmen es ein bisschen weiter - hier eine version mit einem container zu helfen, die Kontrolle der
max-width
undmax-height
anstatt sich auf den Körper /viewport http://jsfiddle.net/4g9e3ywy/