Skip to content

Instantly share code, notes, and snippets.

@heyjoecampbell

heyjoecampbell/Youtube Responsive Video and Play Button Placeholder CSS

Created January 9, 2018 22:27
Show Gist options
  • Save heyjoecampbell/7161b912480e9ceb9081945cd1e90e73 to your computer and use it in GitHub Desktop.
Save heyjoecampbell/7161b912480e9ceb9081945cd1e90e73 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube Responsive Video and Play Button Placeholder CSS
Raw
Youtube Responsive Video and Play Button Placeholder CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
max-width: 100%;
margin: 2.5rem 0;
border: 1px solid #5b5b5b;
background: #eee;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAwCAMAAACffixXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQ2NTBGNjVFRUQxQzExRTdBNUEzOTgzMDE3NjQzRDcwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ2NTBGNjVGRUQxQzExRTdBNUEzOTgzMDE3NjQzRDcwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDY1MEY2NUNFRDFDMTFFN0E1QTM5ODMwMTc2NDNENzAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDY1MEY2NURFRDFDMTFFN0E1QTM5ODMwMTc2NDNENzAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62f5WSAAABj1BMVEX/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AAD/AQH/AgL/AwP/Bgb/DAz/DQ3/EBD/Fxf/GBj/HR3/Hh7/Hx//ISH/JSX/KSn/NTX/Ojr/Q0P/R0f/S0v/Xl7/aWn/amr/eXn/enr/hYX/j4//k5P/qKj/qqr/tLT/tbX/vr7/wcH/w8P/xMT/2Nj/2dn/6ur/7e3/9vb/9/f/+fn/+vr/+/v//Pz//f3//v7////OU7yvAAAAU3RSTlMAAQIDBwoOEBMWGiAlLTRAQUVLT1haYGhyeX1+hYiLjpCRlpmbnqOkpaipq6ytt7m9xsfJz9TV2tvd3+Dh4uPk5+rs7e7v8PHy8/T19vf4+fr7/OPN0/4AAAHHSURBVEjHzZfXUwIxEMYXUBBs2EAsgJWTZgEVbFRBBRU4e+8Fe+9KyR8u4DijD8edZB/8njKzmd9Mks3utwA5iSSS4hJFWUVVTa1KrWnS6lpa2zs6GYYxWsxmc1dm0dnR3tqi0zZp1KramqqKMkVJsUQigp+SKtXNBqut3+EcGhlze7w+nz8QnMhociqjyewqGPD7fF6Pe2xkyOnot1kNzWql9AdCXNc96g/F2D8pFvKPdteJvxnyNg9boDxt8i+GjJlhC9YMI8tBGsMshcKN2Xcpt7NUspeLoKhhmg4y3VAEpSaWUqZSqO6lhfRWQ/0gLWSwHvQuWohLD5YALSRggR7OLFlcEZgpPdAX4QpunsVXhUAifTDAGdx6eL3cXxZAGYBhztjGTSrxcr67wAsZBjc35DpJyMfjyTYfxA3j+SEk/X53tJYfMg4hHgghqberw6V8kBDM8kIIST5f7M1xQ2YhKgBCSOLpdIdzY1QghKQ/7o/XaSFZzO3B/D+AZI4Tpz0Oz8WiPDFKsqGkPcoHRCkFKEUJpTyiFGqUloHSvFDaKEpDR7EWKCYHxW6hGD8kC4pihnFsecEDQqX015SRd1SxGHlGlU98gOsiiyZJgAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment