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

Revisions

  1. electricg created this gist Feb 2, 2018.
    244 changes: 244 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,244 @@
    <!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>
    93 changes: 93 additions & 0 deletions jsbin.codiyol.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    *, *: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);
    }