Fixed aspect ratio video embeds - padding trick
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
@import url('https://fonts.googleapis.com/css?family=Palanquin:300,400,500,600');
$white: #fff;
$backgroundColor: #e3e3e3;
$fontColor: #333;
$descriptionColor: #828282;
$timestampColor: #d2d1d1;
$accentColor: #46b6d6;
html,
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: $backgroundColor;
color: $fontColor;
font-family: "Palanquin", Helvetica, sans-serif;
font-size: 15px;
}
a {
text-decoration: none;
color: $accentColor;
transition: color 0.3s ease-in-out;
&:hover {
color: darken($accentColor, 15%);
}
&:focus,
&:active {
color: darken($accentColor, 25%);
}
}
.card {
width: 90%;
background-color: $white;
box-shadow: 0px 5px 20px 0px rgba(#000000, 0.2);
@media (min-width: 480px) {
width: 70%;
max-width: 760px;
}
&__sharing {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30px 0 15px;
}
&__social {
display: flex;
}
&__social-icon {
margin-left: 1.5em;
font-size: 1.3rem;
}
&__info {
margin: 0 auto;
max-width: 500px;
padding: 6% 8%;
@media (min-width: 768px) {
padding: 4% 10%;
}
}
&__author {
font-weight: 300;
font-size: 1.05rem;
}
&__title {
margin: 0.5em 0 0.7em;
font-size: 1.3rem;
font-weight: 500;
}
&__description {
font-weight: 300;
line-height: 1.4;
color: $descriptionColor;
}
&__timestamp {
display: flex;
color: $descriptionColor;
align-items: center;
font-size: 1rem;
line-height: 1;
color: $timestampColor;
letter-spacing: 1px;
}
&__timestamp-icon {
margin-right: 0.5em;
font-size: 1.3em;
line-height: 1;
}
}
.video {
width: 100%;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/Screen%20Shot%202017-05-01%20at%2011.27.18%20PM.png') center / cover no-repeat;
&__container {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
&__placeholder {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/Screen%20Shot%202017-05-01%20at%2011.27.18%20PM.png') center / cover no-repeat;
}
&__embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
<div class="card">
<div class="video">
<div class="video__container">
<iframe class="video__embed" src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
<a href="https://www.youtube.com/watch?v=upPCohrJcbw" class="video__placeholder" target="_blank"></a>
</div>
</div>
<div class="card__info">
<a href="https://twitter.com/rdubb205" target="_blank"><h2 class="card__author">Ryan Williams</h2></a>
<h1 class="card__title">Short Film - Data Never Dies</h1>
<p class="card__description">
This film about a thrilling tale of data espionage was written, shot, and edited within 24 hours during a company hackathon.
<div class="card__sharing">
<div class="card__timestamp">
<span class="ion-android-time card__timestamp-icon"></span>
7:25
</div>
<div class="card_social">
<a class="ion-social-facebook card__social-icon" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//youtu.be/upPCohrJcbw" onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="Share on Facebook"></a>
<a href="https://twitter.com/intent/tweet?url=https%3A//youtu.be/upPCohrJcbw&text=Data%20Never%20Dies&via=YouTube&related=YouTube,YouTubeTrends,YTCreators" onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" class="ion-social-twitter card__social-icon"></a>
</div>
</div>
</div>
</div>
Responsiveness and video embeds don't usually play nicely. Putting an end to that here with a fixed aspect-ratio CSS trick.
Also, feel free to entertain yourself with that short film. It's pretty snazzy :D.
Blog post here: http://ramenhog.com/blog/2017/05/09/experiments-in-fixed-aspect-ratios