Demos Back to Docs

Most Viewed Music Videos of All Time

87 of 124
This demo shows how you can easily embed media files to show off consumable content.
Result Full HTML CSS JS
Edit Download

Full 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
});

Related Docs

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!

Edit in Studio

Related Docs

Demo Gallery