Skip to content

Commit

Permalink
Embed YouTube videos
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxim-belkin
maxim-belkin committed Jul 7, 2020
1 parent f7978aa commit 42404f3
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 8 deletions.
8 changes: 7 additions & 1 deletion _includes/install_instructions/editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,16 @@ <h3>Text Editor</h3>
<article role="tabpanel" class="tab-pane" id="editor-macos">
<p>
nano is a basic editor and the default that instructors use in the workshop.
See the Git installation <a href="https://www.youtube.com/watch?v=9LQhwETCdwY ">video tutorial</a>
See the Git installation <a href="#editor-macos-video-tutorial">video tutorial</a>
for an example on how to open nano.
It should be pre-installed.
</p>
<h4 id="editor-macos-video-tutorial">Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/9LQhwETCdwY" class="yt-frame"></iframe>
</div>
</div>
<p>
Others editors that you can use are
<a href="https://www.barebones.com/products/bbedit/">BBEdit</a> or
Expand Down
7 changes: 6 additions & 1 deletion _includes/install_instructions/git.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ <h3>Git</h3>
</p>
</article>
<article role="tabpanel" class="tab-pane" id="git-macos">
<a href="https://www.youtube.com/watch?v=9LQhwETCdwY ">Video Tutorial</a>
<p>
<strong>For macOS</strong>, install Git for Mac
by downloading and running the most recent "mavericks" installer from
Expand All @@ -53,6 +52,12 @@ <h3>Git</h3>
most recent available installer labelled "snow-leopard"
<a href="http://sourceforge.net/projects/git-osx-installer/files/">available here</a>.
</p>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/9LQhwETCdwY" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="git-linux">
<p>
Expand Down
14 changes: 12 additions & 2 deletions _includes/install_instructions/python.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,30 @@ <h3>Python</h3>

<div class="tab-content">
<article role="tabpanel" class="tab-pane active" id="python-windows">
<a href="https://www.youtube.com/watch?v=xxQ0mzZ8UvA">Video Tutorial</a>
<ol>
<li>Open <a href="https://www.anaconda.com/products/individual#download-section">https://www.anaconda.com/products/individual#download-section</a> with your web browser.</li>
<li>Download the Anaconda for Windows installer with Python 3. (If you are not sure which version to choose, you probably want the 64-bit Graphical Installer <em>Anaconda3-...-Windows-x86_64.exe</em>)</li>
<li>Install Python 3 by running the Anaconda Installer, using all of the defaults for installation <em>except</em> make sure to check <strong>Add Anaconda to my PATH environment variable</strong>.</li>
</ol>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/xxQ0mzZ8UvA" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="python-macos">
<a href="https://www.youtube.com/watch?v=TcSAln46u9U">Video Tutorial</a>
<ol>
<li>Open <a href="https://www.anaconda.com/products/individual#download-section">https://www.anaconda.com/products/individual#download-section</a> with your web browser.</li>
<li>Download the Anaconda Installer with Python 3 for macOS (you can either use the Graphical or the Command Line Installer).</li>
<li>Install Python 3 by running the Anaconda Installer using all of the defaults for installation.</li>
</ol>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/TcSAln46u9U" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="python-linux">
<ol>
Expand Down
14 changes: 12 additions & 2 deletions _includes/install_instructions/r.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ <h3>R</h3>

<div class="tab-content">
<article role="tabpanel" class="tab-pane active" id="rstats-windows">
<a href="https://www.youtube.com/watch?v=q0PjTAylwoU">Video Tutorial</a>
<p>
Install R by downloading and running
<a href="https://cran.r-project.org/bin/windows/base/release.htm">this .exe file</a>
Expand All @@ -29,16 +28,27 @@ <h3>R</h3>
administrator" instead of double-clicking). Otherwise problems may occur later,
for example when installing R packages.
</p>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/q0PjTAylwoU" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="rstats-macos">
<a href="https://www.youtube.com/watch?v=5-ly3kyxwEg">Video Tutorial</a>
<p>
Install R by downloading and running
<a href="https://cran.r-project.org/bin/macosx/R-latest.pkg">this .pkg file</a>
from <a href="https://cran.r-project.org/index.html">CRAN</a>.
Also, please install the
<a href="https://www.rstudio.com/products/rstudio/download/#download">RStudio IDE</a>.
</p>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/5-ly3kyxwEg" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="rstats-linux">
<p>
Expand Down
15 changes: 13 additions & 2 deletions _includes/install_instructions/shell.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ <h3>The Bash Shell</h3>

<div class="tab-content">
<article role="tabpanel" class="tab-pane active" id="shell-windows">
<a href="https://www.youtube.com/watch?v=339AEqk9c-8">Video Tutorial</a>
<ol>
<li>Download the Git for Windows <a href="https://gitforwindows.org/">installer</a>.</li>
<li>Run the installer and follow the steps below:
Expand Down Expand Up @@ -84,14 +83,20 @@ <h3>The Bash Shell</h3>
</li>
</ol>
<p>This will provide you with both Git and Bash in the Git Bash program.</p>
<h4>Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/339AEqk9c-8" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="shell-macos">
<p>
The default shell in some versions of macOS is Bash, and
Bash is available in all versions, so no need to install anything.
You access Bash from the Terminal (found in
<code>/Applications/Utilities</code>).
See the Git installation <a href="https://www.youtube.com/watch?v=9LQhwETCdwY ">video tutorial</a>
See the Git installation <a href="#shell-macos-video-tutorial">video tutorial</a>
for an example on how to open the Terminal.
You may want to keep Terminal in your dock for this workshop.
</p>
Expand All @@ -105,6 +110,12 @@ <h3>The Bash Shell</h3>
If you want to change your default shell, see <a href="https://support.apple.com/en-au/HT208050" rel="noopener">
this Apple Support article</a> and follow the instructions on "How to change your default shell".
</p>
<h4 id="shell-macos-video-tutorial">Video Tutorial</h4>
<div class="yt-wrapper2">
<div class="yt-wrapper">
<iframe frameborder="0" allowfullscreen src="https://www.youtube.com/embed/9LQhwETCdwY" class="yt-frame"></iframe>
</div>
</div>
</article>
<article role="tabpanel" class="tab-pane" id="shell-linux">
<p>
Expand Down
22 changes: 22 additions & 0 deletions assets/css/lesson.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,28 @@ ul.nav.nav-tabs {
// 7.07 on E1E1E1: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=E1E1E1&api (tab panels)
a { color: #204A6F; }

// .yt-wrapper2 can be used for limiting maximum width of YouTube iframes only
.yt-wrapper2 { max-width: 100%; margin: 0 auto; }

// Use full width on small displays
@media only screen and (max-width: 600px) { .yt-wrapper2 { max-width: 100%; } }

.yt-wrapper {
height: 0;
margin-top: 10px;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

.yt-frame {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

//----------------------------------------
// Specialized blockquote environments for learning objectives, callouts, etc.
//----------------------------------------
Expand Down

0 comments on commit 42404f3

Please sign in to comment.