Demos Back to Demos

Most Viewed Music Videos of All Time

16 of 25

Easily embed media files to show off consumable content.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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" defer></script>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
  </head>
  <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>

CSS

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) {
  body {
    padding: 5px;
  }
  zing-grid {
    max-width: 350px;
  }
}


iframe {
  border: none;
  width: 100%;
  max-width: 100%;
}

JS

// window.onload 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 the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio