mirror of
https://github.com/danbee/jekyll-video-tag
synced 2025-03-04 08:59:11 +00:00
109 lines
4.4 KiB
HTML
109 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<title>Jekyll Video Tag by danbee</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<div class="inner">
|
|
|
|
<header>
|
|
<h1>Jekyll Video Tag</h1>
|
|
<h2>Responsive videos for Jekyll.</h2>
|
|
</header>
|
|
|
|
<section id="downloads" class="clearfix">
|
|
<a href="https://github.com/danbee/jekyll-video-tag/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
|
|
<a href="https://github.com/danbee/jekyll-video-tag/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
|
|
<a href="https://github.com/danbee/jekyll-video-tag" id="view-on-github" class="button"><span>View on GitHub</span></a>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<section id="main_content">
|
|
<h1>
|
|
<a name="jekyll-video-tag" class="anchor" href="#jekyll-video-tag"><span class="octicon octicon-link"></span></a>Jekyll Video Tag</h1>
|
|
|
|
<p>Jekyll Video Tag is a liquid tag that adds responsive videos to your <a href="http://jekyllrb.com">Jekyll</a> static site.</p>
|
|
|
|
<h2>
|
|
<a name="installation" class="anchor" href="#installation"><span class="octicon octicon-link"></span></a>Installation</h2>
|
|
|
|
<p>Add this line to your application's Gemfile:</p>
|
|
|
|
<pre><code>gem 'jekyll-video-tag'
|
|
</code></pre>
|
|
|
|
<p>And then execute:</p>
|
|
|
|
<pre><code>$ bundle
|
|
</code></pre>
|
|
|
|
<p>Or install it yourself as:</p>
|
|
|
|
<pre><code>$ gem install jekyll-video-tag
|
|
</code></pre>
|
|
|
|
<p>Add the gem to your Jekyll config:</p>
|
|
|
|
<pre><code>gems: ['jekyll_video_tag']
|
|
</code></pre>
|
|
|
|
<p>Place the following snippet somewhere in your CSS:</p>
|
|
|
|
<div class="highlight highlight-css"><pre><span class="nc">.video-container</span> <span class="p">{</span>
|
|
<span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
|
|
<span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
|
|
<span class="k">height</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
|
|
<span class="nc">.video-container</span> <span class="nt">iframe</span> <span class="p">{</span>
|
|
<span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
|
|
<span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
|
|
<span class="k">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span>
|
|
</pre></div>
|
|
|
|
<h2>
|
|
<a name="usage" class="anchor" href="#usage"><span class="octicon octicon-link"></span></a>Usage</h2>
|
|
|
|
<pre><code>{% video {embed-url} width={width} height={height} %}
|
|
</code></pre>
|
|
|
|
<p>The embed URL is the one that is referenced by the iframe in the video embed code.</p>
|
|
|
|
<h3>
|
|
<a name="example" class="anchor" href="#example"><span class="octicon octicon-link"></span></a>Example:</h3>
|
|
|
|
<pre><code>{% video //www.youtube.com/embed/7eP4pw03PCg width=560 height=315 %}
|
|
</code></pre>
|
|
|
|
<h2>
|
|
<a name="contributing" class="anchor" href="#contributing"><span class="octicon octicon-link"></span></a>Contributing</h2>
|
|
|
|
<ol>
|
|
<li>Fork it ( <a href="https://github.com/danbee/jekyll_video_tag/fork">https://github.com/danbee/jekyll_video_tag/fork</a> )</li>
|
|
<li>Create your feature branch (<code>git checkout -b my-new-feature</code>)</li>
|
|
<li>Commit your changes (<code>git commit -am 'Add some feature'</code>)</li>
|
|
<li>Push to the branch (<code>git push origin my-new-feature</code>)</li>
|
|
<li>Create a new Pull Request</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<footer>
|
|
Jekyll Video Tag is maintained by <a href="https://github.com/danbee">danbee</a><br>
|
|
This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |