Most Viewed Music Videos of All Time
This demo shows how you can easily embed media files to show off consumable content.
Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Most Viewed Music Videos of All Time</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet"> <style> .zg-body { font-family: 'Work Sans', sans-serif; padding: 50px; background-color: #1f1f1f; background-image: url("https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/top-music-videos%2Fgreen-dust-and-scratches.png?alt=media&token=f6fd2282-0354-4cdc-af48-39783fa00cbf"); } /* Grid */ zing-grid { --theme-color-primary: #10d197; --zg-icon-color: #043b2b; background: transparent; border: none; font-family: 'Work Sans', sans-serif; font-size: 13px; margin: 30px auto 0 auto; max-width: 900px; padding: 0; } zg-caption { background: #10d197; color: #043b2b; font-size: 23px; margin: 0 15px 5px 15px; padding: 10px; text-align: center; } @media (max-width: 1023px) { zg-caption { margin: 0 10px 5px 10px; } } @media (max-width: 766px) { zg-caption { margin: 0 5px 5px 5px; } } zg-control-bar { display: none; } zg-body { background: transparent; border: none; margin-bottom: 7px; } zg-body label[data-field-label] { display: none; } @media (min-width: 1400px) { zg-body { --zg-card-columns: 33.3%; } } zg-row { border: 1px solid #10d197; background-color: #1b1b1b; margin: 5px; } zg-body zg-row zg-cell:before { font-size: 9px; letter-spacing: .5px; font-weight: 400; text-transform: uppercase; } zg-body zg-row zg-cell:nth-child(1):before, zg-body zg-row zg-cell:nth-child(2):before { display: none; } zg-body zg-row zg-cell:nth-child(1) { color: #043b2b; background: #10d197; font-size: 12px; padding-top: 10px; padding-bottom: 7px; margin-top: -12px; text-transform: none; font-weight: bold; } zg-body zg-row zg-cell { font-size: 15px; font-weight: 400; background-color: #1b1b1b; color: white; margin-top: 5px; margin-bottom: 5px; } zg-body zg-row zg-cell:nth-child(2) { padding: 0; margin-top: -8px; border: none; background: transparent; } zg-body zg-row zg-cell:nth-child(3), zg-body zg-row zg-cell:nth-child(4), zg-body zg-row zg-cell:nth-child(5) { border-bottom: 1px solid #10d197; } zg-body zg-row zg-cell:nth-child(3), zg-body zg-row zg-cell:nth-child(4), zg-body zg-row zg-cell:nth-child(5), zg-body zg-row zg-cell:nth-child(6) { margin: 0 15px; } zg-pager, zg-watermark { margin: 0 15px; background: #10d197; color: #043b2b; border: none; } @media (max-width: 1023px) { zg-pager { margin: 0 10px; } } @media (max-width: 766px) { zg-pager { margin: 0 5px 5px 5px; } } zg-watermark { background: #10d197; } @media (max-width: 561px) { .zg-body { padding: 5px; } zing-grid { max-width: 350px; } } .zg-body iframe { border: none; width: 100%; max-width: 100%; } zing-grid[loading] { height: 1628px; } </style> </head> <body class="zg-body"> <zing-grid src="https://zinggrid-examples.firebaseio.com/most-viewed-music-videos-of-all-time" caption="Most Viewed Music Videos of All Time" sort pager page-size="6" page-size-options="3,6,12" layout="card" layout-controls="disabled"> <zg-colgroup> <zg-column index="rank" header="Rank"></zg-column> <zg-column index="musicVideoUrl" type="iframe" header="URL"></zg-column> <zg-column index="songName" header="Song Name"></zg-column> <zg-column index="songArtist" header="Artist"></zg-column> <zg-column index="viewCount" header="View Count"></zg-column> <zg-column index="musicVideoDirector" header="Director"></zg-column> </zg-colgroup> </zing-grid> <script> // window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content }); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Most Viewed Music Videos of All Time</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet"> </head> <body class="zg-body"> <zing-grid src="https://zinggrid-examples.firebaseio.com/most-viewed-music-videos-of-all-time" caption="Most Viewed Music Videos of All Time" sort pager page-size="6" page-size-options="3,6,12" layout="card" layout-controls="disabled"> <zg-colgroup> <zg-column index="rank" header="Rank"></zg-column> <zg-column index="musicVideoUrl" type="iframe" header="URL"></zg-column> <zg-column index="songName" header="Song Name"></zg-column> <zg-column index="songArtist" header="Artist"></zg-column> <zg-column index="viewCount" header="View Count"></zg-column> <zg-column index="musicVideoDirector" header="Director"></zg-column> </zg-colgroup> </zing-grid> </body> </html>
.zg-body { font-family: 'Work Sans', sans-serif; padding: 50px; background-color: #1f1f1f; background-image: url("https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/top-music-videos%2Fgreen-dust-and-scratches.png?alt=media&token=f6fd2282-0354-4cdc-af48-39783fa00cbf"); } /* Grid */ zing-grid { --theme-color-primary: #10d197; --zg-icon-color: #043b2b; background: transparent; border: none; font-family: 'Work Sans', sans-serif; font-size: 13px; margin: 30px auto 0 auto; max-width: 900px; padding: 0; } zg-caption { background: #10d197; color: #043b2b; font-size: 23px; margin: 0 15px 5px 15px; padding: 10px; text-align: center; } @media (max-width: 1023px) { zg-caption { margin: 0 10px 5px 10px; } } @media (max-width: 766px) { zg-caption { margin: 0 5px 5px 5px; } } zg-control-bar { display: none; } zg-body { background: transparent; border: none; margin-bottom: 7px; } zg-body label[data-field-label] { display:none; } @media (min-width: 1400px) { zg-body { --zg-card-columns: 33.3%; } } zg-row { border: 1px solid #10d197; background-color: #1b1b1b; margin: 5px; } zg-body zg-row zg-cell:before { font-size: 9px; letter-spacing: .5px; font-weight: 400; text-transform: uppercase; } zg-body zg-row zg-cell:nth-child(1):before, zg-body zg-row zg-cell:nth-child(2):before { display: none; } zg-body zg-row zg-cell:nth-child(1) { color: #043b2b; background: #10d197; font-size: 12px; padding-top: 10px; padding-bottom: 7px; margin-top: -12px; text-transform: none; font-weight: bold; } zg-body zg-row zg-cell { font-size: 15px; font-weight: 400; background-color: #1b1b1b; color: white; margin-top: 5px; margin-bottom: 5px; } zg-body zg-row zg-cell:nth-child(2) { padding: 0; margin-top: -8px; border: none; background: transparent; } zg-body zg-row zg-cell:nth-child(3), zg-body zg-row zg-cell:nth-child(4), zg-body zg-row zg-cell:nth-child(5) { border-bottom: 1px solid #10d197; } zg-body zg-row zg-cell:nth-child(3), zg-body zg-row zg-cell:nth-child(4), zg-body zg-row zg-cell:nth-child(5), zg-body zg-row zg-cell:nth-child(6) { margin: 0 15px; } zg-pager, zg-watermark { margin: 0 15px; background: #10d197; color: #043b2b; border: none; } @media (max-width: 1023px) { zg-pager { margin: 0 10px; } } @media (max-width: 766px) { zg-pager { margin: 0 5px 5px 5px; } } zg-watermark { background: #10d197; } @media (max-width: 561px) { .zg-body { padding: 5px; } zing-grid { max-width: 350px; } } .zg-body iframe { border: none; width: 100%; max-width: 100%; }
// window:load event for Javascript to run after HTML // because this Javascript is injected into the document head window.addEventListener('load', () => { // Javascript code to execute after DOM content });
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!