Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta name="twitter:card" content="player"/> | |
| <meta name="twitter:site" content=""/> | |
| <!--meta name="twitter:player" content="https://video.twimg.com/ext_tw_video/1744795788021035009/pu/vid/avc1/480x852/Dhd9PPl9fT8iBYpl.mp4?tag=12"/> | |
| <meta name="twitter:player:stream" content="https://video.twimg.com/ext_tw_video/1744795788021035009/pu/vid/avc1/480x852/Dhd9PPl9fT8iBYpl.mp4?tag=12"/--> | |
| <meta name="twitter:player:width" content="100%"/> | |
| <meta name="twitter:player:height" content="100%"/> | |
| <meta property="og:title" content="Video Player"/> | |
| <meta property="og:description" content="Video Player"/> | |
| <meta property="og:image" content="https://huggingface.co/datasets/jbilcke-hf/ai-tube-index/resolve/main/videos/165a6c81-3747-44a4-93a5-46b87353cd02.webp"/> | |
| <!--meta http-equiv="refresh" content="0; url=https://jbilcke-hf-ai-tube.hf.space/"--> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script> | |
| const queryString = window.location.search; | |
| const urlParams = new URLSearchParams(queryString); | |
| const vid = urlParams.get("video"); | |
| //var str = window.location.href; | |
| // split('?')[1] takes all after '?' (removes http://example.com) | |
| // split('&') creates array ('bofn=Dave', 'boln=Nate', ...) | |
| //var parts = str.split('?')[1].split('&'); | |
| // go through all variables | |
| //for (let i = 0; i < parts.length; i++) { | |
| // create new HTML element | |
| var eln = document.createElement('meta'); | |
| var elc = document.createElement('meta'); | |
| // split key, value | |
| //var keyval = parts[i].split('='); | |
| // set name and content attributes, fill values in | |
| eln.name = "twitter:player"; | |
| eln.content = vid; | |
| elc.name = "twitter:player:stream"; | |
| elc.content = vid; | |
| // append meta elements to head | |
| document.getElementsByTagName('head')[0].appendChild(eln); | |
| document.getElementsByTagName('head')[0].appendChild(elc); | |
| </script> | |
| <style> | |
| .container { | |
| position: relative; | |
| overflow: hidden; | |
| width: 100%; | |
| padding-top: 100%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ | |
| } | |
| .responsive-iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <iframe | |
| id="myFrame" | |
| class="responsive-iframe" | |
| src="" | |
| frameborder="0" | |
| ></iframe> | |
| </div> | |
| <!--script> | |
| const queryString = window.location.search; | |
| const urlParams = new URLSearchParams(queryString); | |
| const vid = urlParams.get("video"); | |
| console.log(vid) | |
| $('meta[name="twitter:player"]').remove(); | |
| $('meta[name="twitter:player:stream"]').remove(); | |
| $('head').append( '<meta name="twitter:player" content="https://omnibus-video-card.static.hf.space/index.html?video='+vid+'">' ); | |
| $('head').append( '<meta name="twitter:player:stream" content="https://omnibus-video-card.static.hf.space/index.html?video='+vid+'">' ); | |
| console.log($('meta[name="twitter:player"]').attr('content')); | |
| console.log($('meta[name="twitter:player:stream"]').attr('content')); | |
| //document.querySelector('meta[name="twitter:player"]').setAttribute("content", "https://omnibus-video-card.static.hf.space/index.html?video="+vid); | |
| //document.querySelector('meta[name="twitter:stream"]').setAttribute("content", "https://omnibus-video-card.static.hf.space/index.html?video="+vid); | |
| document.getElementById("myFrame").src = vid; | |
| </script--> | |
| </body> | |
| </html> | |