Template:Georgia State/Fancybox

/* First make sure the video thumbnail images are responsive. */ img { max-width: 100%; height: auto; } /* This is the starting grid for each video with thumbnails 5 across for the largest screen size. It's important to use percentages or there may be gaps on the right side of the page. */ .video { background: #fff; padding-bottom: 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); width: 31%; /* Thumbnails 5 across */ margin: 1%; float: left; } /* These keep the height of each video consistent between YouTube and Vimeo. Each can have thumbnail sizes that vary by 1px and are likely break your layout. */ .video figure { height: 0; padding-bottom: 60%; /* Media Queries - This is the responsive grid. */ @media (max-width: 1366px) { .video { width: 23%; /* Thumbnails 4 across */ } } @media (max-width: 1024px) { .video { width: 31.333%; /* Thumbnails 3 across */ } } @media (max-width: 600px) { .video { width: 48%; /* Thumbnails 2 across */ } } @media (max-width: 360px) { .video { display: block; width: 96%; /* Single column view. */ margin: 2%; /* The smaller the screen, the smaller the percentage actually is. */ float: none; } } /* These are my preferred rollover styles. */ .video img { width: 100%; opacity: 1; } .video img:hover, .video img:active, .video img:focus { opacity: 0.75; } The media query breakpoints are videos 5 across @mixin grid { width: 18%; margin: 1%; float: left; @media (max-width: 1366px) { width: 23%; } @media (max-width: 1024px) { width: 31.333%; } @media (max-width: 600px) { width: 48%; } @media (max-width: 360px) { display: block; width: 96%; margin: 2%; float: none; } } @mixin hover { opacity: 1; &:hover, &:active, &:focus { opacity: 0.75; } } .video { background: #fff; padding-bottom: 20px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); @include grid; figure { height: 0; padding-bottom: 60%; } img { width: 100%; @include hover; } }