Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/css-video-gallery.markdown

Created May 23, 2019 12:21
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
CSS video gallery
Raw
index.html
<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>
Raw
script.js
//What are you looking here for?
Raw
style.sass
*
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment