mobile responsive video
This commit is contained in:
parent
c1103b293e
commit
a237263a86
2 changed files with 21 additions and 1 deletions
|
|
@ -8,8 +8,10 @@
|
|||
<div class="title"><img src="assets/images/logo.png" alt="Huegasm"></div>
|
||||
<p id="intro">Your lights, meet your music. Huegasm.</p>
|
||||
<p id="introParagraph">Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.</p>
|
||||
<div class="embedContainer">
|
||||
<div class="embedContainerWrapper">
|
||||
<div class="embedContainer">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{{#paper-button raised=true primary=true action="isReady" class="goButton center-block"}}Go!{{/paper-button}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,24 @@ body {
|
|||
}
|
||||
|
||||
.embedContainer {
|
||||
position:relative;
|
||||
padding-bottom:56.25%;
|
||||
padding-top:30px;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.embedContainerWrapper {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embedContainer iframe, .embedContainer object, .embedContainer embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.goButton {
|
||||
|
|
|
|||
Reference in a new issue