Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/index.html

Created February 2, 2018 23:32
Show Gist options
  • Save electricg/33587ec14b60fe9acdb4aa8d0b3233e0 to your computer and use it in GitHub Desktop.
Save electricg/33587ec14b60fe9acdb4aa8d0b3233e0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/codiyol
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
*, *:after, *:before {
box-sizing: border-box;
}
html {
--block: 8px;
--media-ratio: (16/9);
--left: (55);
--right: (100 - var(--left));
--left-p: (1% * var(--left));
--right-p: (1% * var(--right));
--between: (var(--block) * 3);
}
/* video player */
.card--video-player {
background: pink;
padding: calc(var(--block) * 3);
width: 100%;
display: flex;
max-width: 1200px;
}
/* .card__thumbnail-wrapper--video-player {
width: calc(var(--left-p));
} */
.card__thumbnail-media--video-player {
height: 0;
padding-top: calc(var(--left-p) / var(--media-ratio));
position: relative;
width: calc(var(--left-p));
}
.card__thumbnail--video-player {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-player:after {
content: 'video 16:9';
}
.card__details--video-player {
background: orange;
padding-left: calc(var(--between));
padding-top: calc(var(--block) * 3);
padding-bottom: calc(var(--block) * 5);
width: calc(var(--right-p));
}
/* video playlist item */
.card--video-playlist-item {
background: cyan;
margin-bottom: calc(var(--block) * 2);
padding: 0;
width: 100%;
display: flex;
}
.card__thumbnail-wrapper--video-playlist-item {
width: calc(
(
(100% + var(--between)) / var(--right) * var(--left) / var(--media-ratio)
- (var(--block) * 14)
)
/ 3 * var(--media-ratio)
);
flex: 0 0 auto;
}
.card__thumbnail-media--video-playlist-item {
height: 0;
padding-top: calc(100% / var(--media-ratio));
position: relative;
width: 100%;
}
.card__thumbnail--video-playlist-item {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-playlist-item:after {
content: 'image 16:9';
font-size: 9px;
}
.card__details--video-playlist-item {
padding-left: calc(var(--block) * 2);
}
</style>
</head>
<body>
<div class="card--video-player">
<!-- <div class="card__thumbnail-wrapper--video-player"> -->
<div class="card__thumbnail-media--video-player">
<div class="card__thumbnail--video-player"></div>
</div>
<!-- </div> -->
<div class="card__details--video-player">
<div class="card--video-playlist-item">
<div class="card__thumbnail-wrapper--video-playlist-item">
<div class="card__thumbnail-media--video-playlist-item">
<div class="card__thumbnail--video-playlist-item"></div>
</div>
</div>
<div class="card__details--video-playlist-item">
<div class="card__details--title-playlist-item">Video Title</div>
</div>
</div>
<div class="card--video-playlist-item">
<div class="card__thumbnail-wrapper--video-playlist-item">
<div class="card__thumbnail-media--video-playlist-item">
<div class="card__thumbnail--video-playlist-item"></div>
</div>
</div>
<div class="card__details--video-playlist-item">
<div class="card__details--title-playlist-item">Video Title</div>
</div>
</div>
<div class="card--video-playlist-item">
<div class="card__thumbnail-wrapper--video-playlist-item">
<div class="card__thumbnail-media--video-playlist-item">
<div class="card__thumbnail--video-playlist-item"></div>
</div>
</div>
<div class="card__details--video-playlist-item">
<div class="card__details--title-playlist-item">Video Title</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">*, *:after, *:before {
box-sizing: border-box;
}
html {
--block: 8px;
--media-ratio: (16/9);
--left: (55);
--right: (100 - var(--left));
--left-p: (1% * var(--left));
--right-p: (1% * var(--right));
--between: (var(--block) * 3);
}
/* video player */
.card--video-player {
background: pink;
padding: calc(var(--block) * 3);
width: 100%;
display: flex;
max-width: 1200px;
}
/* .card__thumbnail-wrapper--video-player {
width: calc(var(--left-p));
} */
.card__thumbnail-media--video-player {
height: 0;
padding-top: calc(var(--left-p) / var(--media-ratio));
position: relative;
width: calc(var(--left-p));
}
.card__thumbnail--video-player {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-player:after {
content: 'video 16:9';
}
.card__details--video-player {
background: orange;
padding-left: calc(var(--between));
padding-top: calc(var(--block) * 3);
padding-bottom: calc(var(--block) * 5);
width: calc(var(--right-p));
}
/* video playlist item */
.card--video-playlist-item {
background: cyan;
margin-bottom: calc(var(--block) * 2);
padding: 0;
width: 100%;
display: flex;
}
.card__thumbnail-wrapper--video-playlist-item {
width: calc(
(
(100% + var(--between)) / var(--right) * var(--left) / var(--media-ratio)
- (var(--block) * 14)
)
/ 3 * var(--media-ratio)
);
flex: 0 0 auto;
}
.card__thumbnail-media--video-playlist-item {
height: 0;
padding-top: calc(100% / var(--media-ratio));
position: relative;
width: 100%;
}
.card__thumbnail--video-playlist-item {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-playlist-item:after {
content: 'image 16:9';
font-size: 9px;
}
.card__details--video-playlist-item {
padding-left: calc(var(--block) * 2);
}
</script>
</body>
</html>
Raw
jsbin.codiyol.css
*, *:after, *:before {
box-sizing: border-box;
}
html {
--block: 8px;
--media-ratio: (16/9);
--left: (55);
--right: (100 - var(--left));
--left-p: (1% * var(--left));
--right-p: (1% * var(--right));
--between: (var(--block) * 3);
}
/* video player */
.card--video-player {
background: pink;
padding: calc(var(--block) * 3);
width: 100%;
display: flex;
max-width: 1200px;
}
/* .card__thumbnail-wrapper--video-player {
width: calc(var(--left-p));
} */
.card__thumbnail-media--video-player {
height: 0;
padding-top: calc(var(--left-p) / var(--media-ratio));
position: relative;
width: calc(var(--left-p));
}
.card__thumbnail--video-player {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-player:after {
content: 'video 16:9';
}
.card__details--video-player {
background: orange;
padding-left: calc(var(--between));
padding-top: calc(var(--block) * 3);
padding-bottom: calc(var(--block) * 5);
width: calc(var(--right-p));
}
/* video playlist item */
.card--video-playlist-item {
background: cyan;
margin-bottom: calc(var(--block) * 2);
padding: 0;
width: 100%;
display: flex;
}
.card__thumbnail-wrapper--video-playlist-item {
width: calc(
(
(100% + var(--between)) / var(--right) * var(--left) / var(--media-ratio)
- (var(--block) * 14)
)
/ 3 * var(--media-ratio)
);
flex: 0 0 auto;
}
.card__thumbnail-media--video-playlist-item {
height: 0;
padding-top: calc(100% / var(--media-ratio));
position: relative;
width: 100%;
}
.card__thumbnail--video-playlist-item {
background: #CCC;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__thumbnail--video-playlist-item:after {
content: 'image 16:9';
font-size: 9px;
}
.card__details--video-playlist-item {
padding-left: calc(var(--block) * 2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment