• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 1327px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <zing-grid data='[
    21. 		    {
    22. 		      "title": "Youtube Drone Shot of UCSD",
    23. 		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    24. 		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    25. 		    },
    26. 		    {
    27. 		      "title": "Youtube Drone Shot of Scripps Pier",
    28. 		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    29. 		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    30. 		    },
    31. 		    {
    32. 		      "title": "Vimeo Drone Shot of Jacobs Medical Center",
    33. 		      "videoUrl": "https://player.vimeo.com/video/217059036",
    34. 		      "description": "Be careful loading iframes because sometimes the content has restrictions!"
    35. 		    }
    36. 		  ]'>
    37.     <zg-colgroup>
    38.       <zg-column index="title" width="250"></zg-column>
    39.       <zg-column index="description" width="200"></zg-column>
    40.       <zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>
    41.     </zg-colgroup>
    42.   </zing-grid>
    43.   <script>
    44.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    45.   </script>
    46. </body>
    47.  
    48. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid data='[
    12. 		    {
    13. 		      "title": "Youtube Drone Shot of UCSD",
    14. 		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    15. 		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    16. 		    },
    17. 		    {
    18. 		      "title": "Youtube Drone Shot of Scripps Pier",
    19. 		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    20. 		      "description": "A video of the beatiful University of California San Diego in sunny southern California."
    21. 		    },
    22. 		    {
    23. 		      "title": "Vimeo Drone Shot of Jacobs Medical Center",
    24. 		      "videoUrl": "https://player.vimeo.com/video/217059036",
    25. 		      "description": "Be careful loading iframes because sometimes the content has restrictions!"
    26. 		    }
    27. 		  ]'>
    28.     <zg-colgroup>
    29.       <zg-column index="title" width="250"></zg-column>
    30.       <zg-column index="description" width="200"></zg-column>
    31.       <zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>
    32.     </zg-colgroup>
    33.   </zing-grid>
    34. </body>
    35.  
    36. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1.