Skip to content

GitLab

Commit a88ae5ca authored by bbguimaraes's avatar bbguimaraes
Browse files

music: display videos inline

parent 0db80873
Hide whitespace changes
Inline Side-by-side
bbguimaraes.com/main.css
View file @ a88ae5ca
......@@ -109,6 +109,15 @@ figcaption {
margin-right: auto;
}
.small-video {
max-width: 400px;
max-height: 300px;
padding: 2em;
display: block;
margin-left: auto;
margin-right: auto;
}
.blog aside {
border: 1px solid #a0a0a0;
margin-bottom: 1em;
......
bbguimaraes.com/music/index.html
View file @ a88ae5ca
......@@ -12,113 +12,142 @@
/
music
</nav>
<ul>
<li>
<h2 id="black-mountain-side-bron-y-aur-stomp">Black Mountain Side / Bron-Y-Aur Stomp</h2>
<a href="/files/music/black_mountain_side_bron_y_aur_stomp.mp4">video</a>
<a href="https://www.youtube.com/watch?v=M2h4PHvdWmQ">youtube</a>
<a href="/files/music/black_mountain_side.pdf">score0</a>
<a href="/files/music/black_mountain_side.mscz">src0</a>
<a href="/files/music/bron-y-aur_stomp.pdf">score1</a>
<a href="/files/music/bron-y-aur_stomp.mscz">src1</a>
</li>
<li>
<h2 id="prelude-cello-suite-no-1">Prelude - Cello Suite no. 1</h2>
<a href="/files/music/prelude_cello_suite_no_1.mp4">video</a>
<a href="https://www.youtube.com/watch?v=d1EgodQaVFM">youtube</a>
<a href="https://imslp.org/wiki/6_Cello_Suites%2C_BWV_1007-1012_(Bach%2C_Johann_Sebastian)">score</a>
</li>
<li>
<h2 id="the-lemon-song">The Lemon Song</h2>
<a href="/files/music/lemon_song.mp4">video</a>
<a href="https://www.youtube.com/watch?v=6m_apoFkUos">youtube</a>
<a href="/files/music/lemon_song.pdf">score</a>
<a href="/files/music/lemon_song.mscz">src</a>
</li>
<li>
<h2 id="cripple-creek">Cripple creek</h2>
<a href="/files/music/cripple_creek.mp4">video</a>
<a href="https://www.youtube.com/watch?v=NyrkW1yLdbM">youtube</a>
<a href="/files/music/cripple_creek.pdf">score</a>
<a href="/files/music/cripple_creek.mscz">src</a>
</li>
<li>
<h2 id="sheiks-theme">Sheik's Theme</h2>
<a href="/files/music/sheik.mp4">video</a>
<a href="https://www.youtube.com/watch?v=8AnQZy7ErP4">youtube</a>
<a href="/files/music/sheik.pdf">score</a>
<a href="/files/music/sheik.mscz">src</a>
</li>
<li>
<h2 id="a-bit-of-soul">A bit of soul (blues hangover)</h2>
<a href="/files/music/a_bit_of_soul.mp4">video</a>
<a href="https://www.youtube.com/watch?v=WdmSdJXBoAI">youtube</a>
<a href="/files/music/a_bit_of_soul.pdf">score</a>
<a href="/files/music/a_bit_of_soul.mscz">src</a>
</li>
<li>
<h2 id="agua-de-beber">Água de beber</h2>
<a href="/files/music/%c3%a1gua_de_beber.mp4">video</a>
<a href="https://www.youtube.com/watch?v=H50UtDGpKaI">youtube</a>
<a href="/files/music/%c3%a1gua_de_beber.pdf">score</a>
<a href="/files/music/%c3%a1gua_de_beber.mscz">src</a>
</li>
<li>
<h2 id="fado-tropical">Fado tropical</h2>
<a href="/files/music/fado_tropical.mp4">video</a>
<a href="https://www.youtube.com/watch?v=X6-uZOONJ5c">youtube</a>
<a href="/files/music/fado_tropical.pdf">score</a>
<a href="/files/music/fado_tropical.mscz">src</a>
</li>
<li>
<h2 id="choo-choo-chboogie">Choo Choo Ch'boogie</h2>
<a href="/files/music/choo_choo_chboogie.mp4">video</a>
<a href="https://www.youtube.com/watch?v=vicfe5B8xqk">youtube</a>
<a href="/files/music/choo_choo_chboogie.pdf">score</a>
<a href="/files/music/choo_choo_chboogie.mscz">src</a>
</li>
<li>
<h2 id="georgia">Georgia</h2>
<a href="/files/music/georgia.mp4">video</a>
<a href="https://www.youtube.com/watch?v=eiDK-Uqplzw">youtube</a>
<a href="/files/music/georgia.pdf">score</a>
<a href="/files/music/georgia.mscz">src</a>
</li>
<li>
<h2 id="i-will-survive">I Will Survive</h2>
<a href="/files/music/i_will_survive.mp4">video</a>
<a href="https://www.youtube.com/watch?v=fqGerMBRWlI">youtube</a>
<a href="/files/music/i_will_survive.pdf">score</a>
<a href="/files/music/i_will_survive.mscz">src</a>
</li>
<li>
<h2 id="not-for-elise">Not for Elise</h2>
<a href="/files/music/not_for_elise.mp4">video</a>
<a href="https://www.youtube.com/watch?v=jBik-oX6Zas">youtube</a>
<a href="/files/music/not_for_elise.pdf">score</a>
<a href="/files/music/not_for_elise.mscz">src</a>
</li>
<li>
<h2 id="jo-soares">Jô Soares</h2>
<a href="/files/music/j%C3%B4_soares.mp4">video</a>
<a href="https://www.youtube.com/watch?v=6WGpJBZ9cOw">youtube</a>
<a href="/files/music/j%C3%B4_soares.pdf">score</a>
<a href="/files/music/j%C3%B4_soares.mscz">src</a>
</li>
<li>
<h2 id="elysian-shadows">Elysian shadows</h2>
<a href="/files/music/elysian_shadows.mp4">video</a>
<a href="https://www.youtube.com/watch?v=nJDZkEGm9t8">youtube</a>
<a href="/files/music/elysian_shadows.pdf">score</a>
<a href="/files/music/elysian_shadows.mscz">src</a>
</li>
<li>
<h2 id="cow-and-chicken">Cow and Chicken</h2>
<a href="/files/music/cow_and_chicken.mp4">video</a>
<a href="https://www.youtube.com/watch?v=87v6T-FPsPs">youtube</a>
<a href="/files/music/cow_and_chicken.pdf">score</a>
<a href="/files/music/cow_and_chicken.mscz">src</a>
</li>
</ul>
<div class="w80">
<h2 id="black-mountain-side-bron-y-aur-stomp">Black mountain side / Bron-Y-Aur stomp</h2>
<a href="/files/music/black_mountain_side_bron_y_aur_stomp.mp4">video</a>
<a href="https://www.youtube.com/watch?v=M2h4PHvdWmQ">youtube</a>
<a href="/files/music/black_mountain_side.pdf">score0</a>
<a href="/files/music/black_mountain_side.mscz">src0</a>
<a href="/files/music/bron-y-aur_stomp.pdf">score1</a>
<a href="/files/music/bron-y-aur_stomp.mscz">src1</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/black_mountain_side_bron_y_aur_stomp.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="prelude-cello-suite-no-1">Prelude - cello suite no. 1</h2>
<a href="/files/music/prelude_cello_suite_no_1.mp4">video</a>
<a href="https://www.youtube.com/watch?v=d1EgodQaVFM">youtube</a>
<a href="https://imslp.org/wiki/6_Cello_Suites%2C_BWV_1007-1012_(Bach%2C_Johann_Sebastian)">score</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/prelude_cello_suite_no_1.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="the-lemon-song">The lemon song</h2>
<a href="/files/music/lemon_song.mp4">video</a>
<a href="https://www.youtube.com/watch?v=6m_apoFkUos">youtube</a>
<a href="/files/music/lemon_song.pdf">score</a>
<a href="/files/music/lemon_song.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/lemon_song.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="cripple-creek">Cripple creek</h2>
<a href="/files/music/cripple_creek.mp4">video</a>
<a href="https://www.youtube.com/watch?v=NyrkW1yLdbM">youtube</a>
<a href="/files/music/cripple_creek.pdf">score</a>
<a href="/files/music/cripple_creek.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/cripple_creek.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="sheiks-theme">Sheik's theme</h2>
<a href="/files/music/sheik.mp4">video</a>
<a href="https://www.youtube.com/watch?v=8AnQZy7ErP4">youtube</a>
<a href="/files/music/sheik.pdf">score</a>
<a href="/files/music/sheik.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/sheik.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="a-bit-of-soul">A bit of soul (blues hangover)</h2>
<a href="/files/music/a_bit_of_soul.mp4">video</a>
<a href="https://www.youtube.com/watch?v=WdmSdJXBoAI">youtube</a>
<a href="/files/music/a_bit_of_soul.pdf">score</a>
<a href="/files/music/a_bit_of_soul.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/a_bit_of_soul.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="agua-de-beber">Água de beber</h2>
<a href="/files/music/%c3%a1gua_de_beber.mp4">video</a>
<a href="https://www.youtube.com/watch?v=H50UtDGpKaI">youtube</a>
<a href="/files/music/%c3%a1gua_de_beber.pdf">score</a>
<a href="/files/music/%c3%a1gua_de_beber.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/%c3%a1gua_de_beber.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="fado-tropical">Fado tropical</h2>
<a href="/files/music/fado_tropical.mp4">video</a>
<a href="https://www.youtube.com/watch?v=X6-uZOONJ5c">youtube</a>
<a href="/files/music/fado_tropical.pdf">score</a>
<a href="/files/music/fado_tropical.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/fado_tropical.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="choo-choo-chboogie">Choo choo ch'boogie</h2>
<a href="/files/music/choo_choo_chboogie.mp4">video</a>
<a href="https://www.youtube.com/watch?v=vicfe5B8xqk">youtube</a>
<a href="/files/music/choo_choo_chboogie.pdf">score</a>
<a href="/files/music/choo_choo_chboogie.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/choo_choo_chboogie.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="georgia">Georgia</h2>
<a href="/files/music/georgia.mp4">video</a>
<a href="https://www.youtube.com/watch?v=eiDK-Uqplzw">youtube</a>
<a href="/files/music/georgia.pdf">score</a>
<a href="/files/music/georgia.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/georgia.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="i-will-survive">I will survive</h2>
<a href="/files/music/i_will_survive.mp4">video</a>
<a href="https://www.youtube.com/watch?v=fqGerMBRWlI">youtube</a>
<a href="/files/music/i_will_survive.pdf">score</a>
<a href="/files/music/i_will_survive.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/i_will_survive.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="not-for-elise">Not for Elise</h2>
<a href="/files/music/not_for_elise.mp4">video</a>
<a href="https://www.youtube.com/watch?v=jBik-oX6Zas">youtube</a>
<a href="/files/music/not_for_elise.pdf">score</a>
<a href="/files/music/not_for_elise.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/not_for_elise.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="jo-soares">Jô Soares</h2>
<a href="/files/music/j%C3%B4_soares.mp4">video</a>
<a href="https://www.youtube.com/watch?v=6WGpJBZ9cOw">youtube</a>
<a href="/files/music/j%C3%B4_soares.pdf">score</a>
<a href="/files/music/j%C3%B4_soares.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/j%C3%B4_soares.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="elysian-shadows">Elysian Shadows</h2>
<a href="/files/music/elysian_shadows.mp4">video</a>
<a href="https://www.youtube.com/watch?v=nJDZkEGm9t8">youtube</a>
<a href="/files/music/elysian_shadows.pdf">score</a>
<a href="/files/music/elysian_shadows.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/elysian_shadows.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
<h2 id="cow-and-chicken">Cow and chicken</h2>
<a href="/files/music/cow_and_chicken.mp4">video</a>
<a href="https://www.youtube.com/watch?v=87v6T-FPsPs">youtube</a>
<a href="/files/music/cow_and_chicken.pdf">score</a>
<a href="/files/music/cow_and_chicken.mscz">src</a>
<video class="small-video" controls preload="metadata">
<source src="/files/music/cow_and_chicken.mp4" />
Your browser doesn't support the &lt;video&gt; tag.
</video>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment