• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
        <style>
            body {
                background: #e6e6e6;
            }
    
            zing-grid[loading] {
                height: 1327px;
            }
        </style>
    </head>
    
    <body>
        <zing-grid data='[
    		    {
    		      "title": "Youtube Drone Shot of UCSD",
    		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    		    },
    		    {
    		      "title": "Youtube Drone Shot of Scripps Pier",
    		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    		    },
    		    {
    		      "title": "Vimeo Drone Shot of Jacobs Medical Center",
    		      "videoUrl": "https://player.vimeo.com/video/217059036",
    		      "description": "Be careful loading iframes because sometimes the content has restrictions!"
    		    }
    		  ]'>
            <zg-colgroup>
                <zg-column index="title" width="250"></zg-column>
                <zg-column index="description" width="200"></zg-column>
                <zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>
            </zg-colgroup>
        </zing-grid>
        <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      </head>
      <body>
         <zing-grid
    		  data='[
    		    {
    		      "title": "Youtube Drone Shot of UCSD",
    		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    		    },
    		    {
    		      "title": "Youtube Drone Shot of Scripps Pier",
    		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    		    },
    		    {
    		      "title": "Vimeo Drone Shot of Jacobs Medical Center",
    		      "videoUrl": "https://player.vimeo.com/video/217059036",
    		      "description": "Be careful loading iframes because sometimes the content has restrictions!"
    		    }
    		  ]'>
    		  <zg-colgroup>
    		    <zg-column index="title" width="250"></zg-column>
    		    <zg-column index="description" width="200"></zg-column>
    		    <zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>
    		  </zg-colgroup>
    		</zing-grid>
    	</body>
    </html>
    body{background:#e6e6e6;}