CSS video gallery
A Pen by Corey Roth on CodePen.
A Pen by Corey Roth on CodePen.
<div class="grid-row reverse video-gallery"> | |
<input type="radio" value="1" name="video-list" id="video-1" checked="checked" /><label for="video-1">Option 1</label> | |
<input type="radio" value="2" name="video-list" id="video-2" /><label for="video-2">Option 2</label> | |
<input type="radio" value="3" name="video-list" id="video-3" /><label for="video-3">Option 3</label> | |
<input type="radio" value="4" name="video-list" id="video-4" /><label for="video-4">Option 4</label> | |
<input type="radio" value="5" name="video-list" id="video-5" /><label for="video-5">Option 5</label> | |
<input type="radio" value="6" name="video-list" id="video-6" /><label for="video-6">Option 6</label> | |
<!-- videos --> | |
<div class="video video-1"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/ROqDTIxRX0Y" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<div class="video video-2"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/9iGoDNlKY-g" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<div class="video video-3"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/l70UhhNalqA" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<div class="video video-4"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDrB5c4-c9Y" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<div class="video video-5"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/UXP307MGQzs" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<div class="video video-6"> | |
<iframe width="560" height="315" src="https://www.youtube.com/embed/0kY0Q5hdjDI" frameborder="0" allowfullscreen></iframe> | |
</div> | |
<!-- videos --> | |
</div> |
//What are you looking here for? |
* | |
box-sizing: border-box | |
html | |
height: 100% | |
overflow: hidden | |
width: 100% | |
body | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif | |
font-size: 16px | |
height: auto | |
line-height: 1 | |
overflow-x: hidden | |
padding: 2rem | |
width: 100% | |
//everything above here is just for pretties | |
.video | |
position: relative | |
padding-top: 4.1% | |
padding-bottom: 51.95% | |
height: 0 | |
iframe | |
position: absolute | |
top: 0 | |
left: 0 | |
height: 100% | |
width: 100% | |
min-height: 0 | |
.video-gallery | |
margin-top: 3em | |
position: relative | |
width: 100% | |
.video | |
animation: 1200ms fadeOut ease | |
animation-fill-mode: both | |
//display: none | |
grid-column-start: 1 | |
grid-row-start: 1 | |
grid-row-end: 7 | |
//height: 0 | |
max-height: 19.5em | |
opacity: 0 | |
transition: all 300ms ease | |
input[type="radio"] | |
font-size: 0 | |
height: 0 | |
opacity: 0 | |
padding: 0 | |
position: fixed | |
width: 0 | |
input | |
grid-column-start: 1 | |
grid-row-start: 1 | |
label | |
color: #000000 | |
font-size: 1.25em | |
font-weight: 400 | |
grid-column-start: 2 | |
margin: 0 !important | |
padding: 1rem 0 1rem 3rem | |
position: relative | |
border-bottom: 1px solid #CCCCCC | |
&:last-of-type | |
border: 0 none | |
input[type="radio"]:checked+label | |
color: #E41F35 !important | |
&:before | |
content: "▶" | |
left: 0 | |
top: 12px | |
position: absolute | |
.grid-row | |
display: block | |
height: 56vw | |
max-height: 19.5em | |
position: relative | |
label | |
left: calc(50% + 16px) | |
position: relative | |
width: calc(50% - 16px) | |
.video | |
padding: 0 | |
position: absolute | |
top: 0 | |
width: 0 | |
&:after | |
content: "" | |
clear: both | |
display: table | |
#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 | |
animation: 1200ms fadeIn ease | |
animation-fill-mode: both | |
//display: block | |
//height: 56vw | |
opacity: 1 | |
width: 50% | |
@keyframes fadeOut | |
0% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 50% | |
25% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 50% | |
49% | |
display: block | |
height: 56vw | |
opacity: 0 | |
width: 50% | |
50% | |
display: none | |
height: 0 | |
opacity: 0 | |
width: 0 | |
@keyframes fadeIn | |
0% | |
opacity: 0 | |
width: 0 | |
49% | |
display: none | |
height: 0 | |
opacity: 0 | |
width: 0 | |
50% | |
display: block | |
height: 56vw | |
opacity: 0 | |
width: 50% | |
100% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 50% | |
@supports(display: grid) | |
.grid-row | |
align-items: start | |
display: grid | |
grid-column-gap: 16px | |
grid-row-gap: 0 | |
grid-template-columns: 1fr 1fr | |
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr | |
label | |
left: auto | |
width: 100% | |
.video | |
position: relative | |
width: 100% | |
#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 | |
width: 100% | |
@keyframes fadeOut | |
0% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 100% | |
25% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 100% | |
49% | |
display: block | |
height: 56vw | |
opacity: 0 | |
width: 100% | |
50% | |
display: none | |
height: 0 | |
opacity: 0 | |
width: 0 | |
@keyframes fadeIn | |
0% | |
opacity: 0 | |
width: 0 | |
49% | |
display: none | |
height: 0 | |
opacity: 0 | |
width: 0 | |
50% | |
display: block | |
height: 56vw | |
opacity: 0 | |
width: 100% | |
100% | |
display: block | |
height: 56vw | |
opacity: 1 | |
width: 100% | |
@media (max-width: 767px) | |
.video-gallery | |
display: flex | |
flex-direction: column | |
height: auto | |
max-height: none | |
label | |
left: auto | |
order: 2 | |
width: 100% | |
.video | |
order: 1 | |
padding-top: 4.1% | |
padding-bottom: 51.95% | |
position: relative | |
top: auto | |
width: 100% | |
#video-1:checked ~ .video-1, #video-2:checked ~ .video-2, #video-3:checked ~ .video-3, #video-4:checked ~ .video-4, #video-5:checked ~ .video-5, #video-6:checked ~ .video-6 | |
width: 100% | |
@keyframes fadeOut | |
0% | |
display: block | |
height: 56vw | |
opacity: 1 | |
25% | |
display: block | |
height: 56vw | |
opacity: 1 | |
49% | |
display: block | |
height: 56vw | |
opacity: 0 | |
50% | |
display: none | |
height: 0 | |
opacity: 0 | |
@keyframes fadeIn | |
0% | |
opacity: 0 | |
49% | |
display: none | |
height: 0 | |
opacity: 0 | |
50% | |
display: block | |
height: 56vw | |
opacity: 0 | |
100% | |
display: block | |
height: 56vw | |
opacity: 1 |