• 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.     zing-grid[loading] {
    10.       height: 277px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <zing-grid caption="Videos in Grids" data='[
    17. 		    {
    18. 		      "title": "Youtube Drone Shot of UCSD",
    19. 		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    20. 		      "description": "A video of the beautiful University of California San Diego in sunny southern California."
    21. 		    },
    22. 		    {
    23. 		      "title": "Vimeo Women in Animation",
    24. 		      "videoUrl": "https://player.vimeo.com/video/263005929",
    25. 		      "description": "Interview with Caroline Foley, well known animator for popular TV shows such as Rick and Morty, Bojack Horseman, and Robot Chicken."
    26. 		    },
    27. 		    {
    28. 		      "title": "Youtube Drone Shot of Scripps Pier",
    29. 		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    30. 		      "description": "A video of the beautiful Scripps Pier in sunny San Diego."
    31. 		    }
    32. 		  ]'>
    33.     <zg-colgroup>
    34.       <zg-column index="title"></zg-column>
    35.       <zg-column index="description"></zg-column>
    36.       <zg-column index="videoUrl" type="iframe" alt="missing iframe"></zg-column>
    37.     </zg-colgroup>
    38.   </zing-grid>
    39.   <script>
    40.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    41.   </script>
    42. </body>
    43.  
    44. </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 caption="Videos in Grids" data='[
    12. 		    {
    13. 		      "title": "Youtube Drone Shot of UCSD",
    14. 		      "videoUrl": "https://www.youtube.com/embed/EA8KDWc9Ch4",
    15. 		      "description": "A video of the beautiful University of California San Diego in sunny southern California."
    16. 		    },
    17. 		    {
    18. 		      "title": "Vimeo Women in Animation",
    19. 		      "videoUrl": "https://player.vimeo.com/video/263005929",
    20. 		      "description": "Interview with Caroline Foley, well known animator for popular TV shows such as Rick and Morty, Bojack Horseman, and Robot Chicken."
    21. 		    },
    22. 		    {
    23. 		      "title": "Youtube Drone Shot of Scripps Pier",
    24. 		      "videoUrl": "https://www.youtube.com/embed/bDFe5Jsa3nY",
    25. 		      "description": "A video of the beautiful Scripps Pier in sunny San Diego."
    26. 		    }
    27. 		  ]'>
    28.     <zg-colgroup>
    29.       <zg-column index="title"></zg-column>
    30.       <zg-column index="description"></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.  
    1.