-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
11 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/video-embed/magic.css?qEfQnA8cD1" integrity="sha384-qEfQnA8cD1JQ0FKE9yaj/IKyeBKqE4t7DGGezsSXfrnn8vrMOux+3a+DStQWye+P" crossorigin="anonymous"/><link rel="icon" href="/video-embed/favicon.ico"/><title>@magic-modules/video-embed</title><meta name="description" content="renders videos from any http url that allows iframe embedding"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/video-embed"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/video-embed/"><span>VideoEmbed</span></a><nav class="Menu"><ul><li><a href="/video-embed/#installation">installation</a></li><li><a href="/video-embed/#usage">usage</a></li><li><a href="/video-embed/#props">props</a></li><li><a href="/video-embed/#fixed-dimensions">fixed dimensions</a></li><li><a href="/video-embed/#source">source</a></li></ul></nav></header><div class="Page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr show"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This page does neither save, collect, nor share any personal data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/video-embed/magic.js?psZbUTetQt" integrity="sha384-psZbUTetQtaUOmJCAdwmJNkd4yUwwNy7bSlknXQ7Byx2n1Sdziy/3zuyj0WYKBP7" crossorigin="anonymous"></script></body></html> | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/video-embed/magic.css?O4FNUSwldd" integrity="sha384-O4FNUSwlddVdi04iuq88FEIe3e9iZvksrGxrHqlcTE9y2vKTs0Jg83YUCx2BcMO1" crossorigin="anonymous"/><link rel="icon" href="/video-embed/favicon.ico"/><title>@magic-modules/video-embed</title><meta name="description" content="renders videos from any http url that allows iframe embedding"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/video-embed"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/video-embed/"><span>VideoEmbed</span></a><nav class="Menu"><ul><li><a href="/video-embed/#installation">installation</a></li><li><a href="/video-embed/#usage">usage</a></li><li><a href="/video-embed/#props">props</a></li><li><a href="/video-embed/#fixed-dimensions">fixed dimensions</a></li><li><a href="/video-embed/#source">source</a></li></ul></nav></header><div class="Page"><div>404 - not found</div></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr show"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This page does neither save, collect, nor share any personal data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/video-embed/magic.js?95VSwqjCnU" integrity="sha384-95VSwqjCnUcjN6rV9ahldkTmTKbNZTfs1aCNH6lTqUGA5mcfILaeYFylJhLCoroT" crossorigin="anonymous"></script></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/video-embed/magic.css?qEfQnA8cD1" integrity="sha384-qEfQnA8cD1JQ0FKE9yaj/IKyeBKqE4t7DGGezsSXfrnn8vrMOux+3a+DStQWye+P" crossorigin="anonymous"/><link rel="icon" href="/video-embed/favicon.ico"/><title>@magic-modules/video-embed</title><meta name="description" content="renders videos from any http url that allows iframe embedding"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/video-embed"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/video-embed/"><span>VideoEmbed</span></a><nav class="Menu"><ul><li><a href="/video-embed/#installation">installation</a></li><li><a href="/video-embed/#usage">usage</a></li><li><a href="/video-embed/#props">props</a></li><li><a href="/video-embed/#fixed-dimensions">fixed dimensions</a></li><li><a href="/video-embed/#source">source</a></li></ul></nav></header><div class="Page"><h1>@magic-modules/video-embed</h1><p>this is the <a href="https://github.com/magic-modules" target="_blank" rel="noopener">@magic-modules</a> VideoEmbed component. It renders videos from any http url that allows iframe embedding.</p><ul class="GitBadges"><li><a href="https://www.npmjs.com/package/@magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/@magic-modules/video-embed.svg" role="presentation" alt=""/></a></li><li><a href="https://travis-ci.com/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://travis-ci.com/magic-modules/video-embed.svg?branch=master" role="presentation" alt=""/></a></li><li><a href="https://ci.appveyor.com/project/magicmodules/video-embed/branch/master" target="_blank" rel="noopener"><img src="https://img.shields.io/appveyor/ci/magicmodules/video-embed/master.svg" role="presentation" alt=""/></a></li><li><a href="https://coveralls.io/github/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/coveralls/github/magic-modules/video-embed/master.svg" role="presentation" alt=""/></a></li><li><a href="https://greenkeeper.io" target="_blank" rel="noopener"><img src="https://badges.greenkeeper.io/magic-modules/video-embed.svg" role="presentation" alt=""/></a></li><li><a href="https://snyk.io/test/github/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/snyk/vulnerabilities/github/magic-modules/video-embed.svg" role="presentation" alt=""/></a></li></ul><h2 id="installation">installation:</h2><p>installation is done using npm. for now, all magic modules live on github and not on npm.</p><p>note the missing @ before magic-modules.</p><p>this is how we install npm modules from github.</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line">npm install magic-modules/video-embed</code></pre></div><h2 id="usage">usage</h2><h3 id="usage-youtube">youtube</h3><p>in a page/component, just pass a video id to the VideoEmbed module.</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed(<span class="string">'ecIWPzGEbFc'</span>)</code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/ecIWPzGEbFc"></iframe></div><h3 id="usage-vimeo">vimeo</h3><p>if the video id is a number, the video is assumed to be hosted on vimeo</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed(153090637)</code><code class="line">VideoEmbed(<span class="string">'153090637'</span>)</code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://player.vimeo.com/video/153090637"></iframe></div><h4 id="usage-others">other video hosts</h4><p>videos from arbitrary hosts can be included as well, as long as those hosts allow iframe embeds</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line"><a href="VideoEmbed('https://videopress.com/embed/kUJmAcSf')" target="_blank" rel="noopener">VideoEmbed('https://videopress.com/embed/kUJmAcSf')</a></code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://videopress.com/embed/kUJmAcSf"></iframe></div><h2 id="props">props</h2><p>you can pass a width and height, a style string and any other props to the video.</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed({ <span class="colon">src</span>: <span class="string">'8QYWGCEm2Dc'</span>, <span class="colon">width</span>: <span class="string">'50%'</span>, <span class="colon">style</span>: <span class="string">'<span class="colon">margin</span>: 1em 0 0;'</span> })</code></pre></div><p>renders</p><div class="VideoEmbed" style="width:50%"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/8QYWGCEm2Dc"></iframe></div><h3 id="fixed-dimensions">fixed video dimensions</h3><p>to set a fixed video size, simply add both a height and a width value (px, em, rem, vh, pt).</p><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed({ <span class="colon">src</span>: <span class="string">'SMhwddNQSWQ'</span>, <span class="colon">width</span>: <span class="string">'300px'</span>, <span class="colon">height</span>: <span class="string">'900px'</span> })</code></pre></div><div class="VideoEmbed" style="height:900px;width:300px"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/SMhwddNQSWQ"></iframe></div><h2 id="source">source</h2><p>the source for this page is in the <a href="https://github.com/magic-modules/video-embed/tree/master/example" target="_blank" rel="noopener">example directory</a> and gets built and published to github using <a href="https://github.com/magic/core" target="_blank" rel="noopener">@magic/core</a></p><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr show"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This page does neither save, collect, nor share any personal data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/video-embed/magic.js?psZbUTetQt" integrity="sha384-psZbUTetQtaUOmJCAdwmJNkd4yUwwNy7bSlknXQ7Byx2n1Sdziy/3zuyj0WYKBP7" crossorigin="anonymous"></script></body></html> | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><link rel="stylesheet" href="/video-embed/magic.css?O4FNUSwldd" integrity="sha384-O4FNUSwlddVdi04iuq88FEIe3e9iZvksrGxrHqlcTE9y2vKTs0Jg83YUCx2BcMO1" crossorigin="anonymous"/><link rel="icon" href="/video-embed/favicon.ico"/><title>@magic-modules/video-embed</title><meta name="description" content="renders videos from any http url that allows iframe embedding"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website","name":"@magic-modules/video-embed"}</script></head><body><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/video-embed/"><span>VideoEmbed</span></a><nav class="Menu"><ul><li><a href="/video-embed/#installation">installation</a></li><li><a href="/video-embed/#usage">usage</a></li><li><a href="/video-embed/#props">props</a></li><li><a href="/video-embed/#fixed-dimensions">fixed dimensions</a></li><li><a href="/video-embed/#source">source</a></li></ul></nav></header><div class="Page"><h1>@magic-modules/video-embed</h1><p>this is the <a href="https://github.com/magic-modules" target="_blank" rel="noopener">@magic-modules</a> VideoEmbed component. It renders videos from any http url that allows iframe embedding.</p><ul class="GitBadges"><li><a href="https://www.npmjs.com/package/@magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/@magic-modules/video-embed.svg" role="presentation" alt=""/></a></li><li><a href="https://travis-ci.com/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/travis/com/magic-modules/video-embed/master" role="presentation" alt=""/></a></li><li><a href="https://ci.appveyor.com/project/magicmodules/video-embed/branch/master" target="_blank" rel="noopener"><img src="https://img.shields.io/appveyor/ci/magicmodules/video-embed/master.svg" role="presentation" alt=""/></a></li><li><a href="https://coveralls.io/github/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/coveralls/github/magic-modules/video-embed/master.svg" role="presentation" alt=""/></a></li><li><a href="https://greenkeeper.io" target="_blank" rel="noopener"><img src="https://badges.greenkeeper.io/magic-modules/video-embed.svg" role="presentation" alt=""/></a></li><li><a href="https://snyk.io/test/github/magic-modules/video-embed" target="_blank" rel="noopener"><img src="https://img.shields.io/snyk/vulnerabilities/github/magic-modules/video-embed.svg" role="presentation" alt=""/></a></li></ul><h2 id="installation">installation:</h2><p>installation is done using npm. for now, all magic modules live on github and not on npm.</p><p>note the missing @ before magic-modules.</p><p>this is how we install npm modules from github.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">npm install magic-modules/video-embed</code></pre></div><h2 id="usage">usage</h2><h3 id="usage-youtube">youtube</h3><p>in a page/component, just pass a video id to the VideoEmbed module.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed(<span class="string">'ecIWPzGEbFc'</span>)</code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/ecIWPzGEbFc"></iframe></div><h3 id="usage-vimeo">vimeo</h3><p>if the video id is a number, the video is assumed to be hosted on vimeo</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed(153090637)</code><code class="line">VideoEmbed(<span class="string">'153090637'</span>)</code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://player.vimeo.com/video/153090637"></iframe></div><h4 id="usage-others">other video hosts</h4><p>videos from arbitrary hosts can be included as well, as long as those hosts allow iframe embeds</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed('https://videopress.com/embed/kUJmAcSf')</code></pre></div><p>renders</p><div class="VideoEmbed"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://videopress.com/embed/kUJmAcSf"></iframe></div><h2 id="props">props</h2><p>you can pass a width and height, a style string and any other props to the video.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed({ <span class="colon">src</span>: <span class="string">'8QYWGCEm2Dc'</span>, <span class="colon">width</span>: <span class="string">'50%'</span>, <span class="colon">style</span>: <span class="string">'<span class="colon">margin</span>: 1em 0 0;'</span> })</code></pre></div><p>renders</p><div class="VideoEmbed" style="width:50%"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/8QYWGCEm2Dc"></iframe></div><h3 id="fixed-dimensions">fixed video dimensions</h3><p>to set a fixed video size, simply add both a height and a width value (px, em, rem, vh, pt).</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line">VideoEmbed({ <span class="colon">src</span>: <span class="string">'SMhwddNQSWQ'</span>, <span class="colon">width</span>: <span class="string">'300px'</span>, <span class="colon">height</span>: <span class="string">'900px'</span> })</code></pre></div><div class="VideoEmbed" style="height:900px;width:300px"><iframe frameborder="0" allow="encrypted-media" allowfullscreen="" src="https://www.youtube-nocookie.com/embed/SMhwddNQSWQ"></iframe></div><h2 id="source">source</h2><p>the source for this page is in the <a href="https://github.com/magic-modules/video-embed/tree/master/example" target="_blank" rel="noopener">example directory</a> and gets built and published to github using <a href="https://github.com/magic/core" target="_blank" rel="noopener">@magic/core</a></p><button class="LightSwitch"></button></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://github.com/magic/core">magic</a></div></div><div class="Gdpr show"><input type="checkbox" name="show-hide" id="show-hide"/><div class="Container"><h3>Magic Privacy Information</h3><p>This page does neither save, collect, nor share any personal data about you.</p><label class="button" for="show-hide">Awesome.</label></div></div></footer></div></main><script src="/video-embed/magic.js?95VSwqjCnU" integrity="sha384-95VSwqjCnUcjN6rV9ahldkTmTKbNZTfs1aCNH6lTqUGA5mcfILaeYFylJhLCoroT" crossorigin="anonymous"></script></body></html> |
Oops, something went wrong.