Fix video links (#130)

* fix video links

* open video links in a new tab

* fix

* Update learnindex.json

* fix

_includes/youtube_card.html

@@ -1,10 +1,10 @@
 <div class='card left compact clickable'>
 <div class="center" style="padding-bottom: 1em;">
-<iframe width="100%" src="{{ include.link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="100%" src="{{ include.embed }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 <div>
-<a href="{{ include.link }}"><h5>{{ include.title }}</h5></a>
+<a href="{{ include.link }}" target="_blank"><h5>{{ include.title }}</h5></a>
 {%- if include.author -%}<p style="font-size: small">{{ include.author }}</p>{%- endif -%}
-<a href="{{ include.link }}"><p style="font-size: small">{{ include.description }}</p></a>
+<a href="{{ include.link }}" target="_blank"><p style="font-size: small">{{ include.description }}</p></a>
 </div>
 </div>

_layouts/learn.html

@@ -82,7 +82,7 @@ <h3>Videos</h3>
 		</div>
 		<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 2rem; padding: 0px;">
 			{%- for video in site.data.learnindex.navigation.videos limit:3 -%}
-				{% include youtube_card.html title=video.name description=video.description link=video.path author=video.author min-height="250px" image="/images/icons/yt_icon_rgb.svg" %}
+				{% include youtube_card.html title=video.name description=video.description embed=video.embed link=video.path author=video.author min-height="250px" image="/images/icons/yt_icon_rgb.svg" %}
 			{%- endfor -%}
 		</div>
 		<div class="row">

videos.html

@@ -29,8 +29,8 @@ <h3>Videos</h3>
 			{%- assign videos = site.data.learnindex.navigation.videos | where: "author", author -%}
 			<h3>{{ author }}</h3>
 			<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 2rem; padding: 0px;">
-			{%- for tutorial in videos -%}
-				{% include youtube_card.html title=tutorial.name description=tutorial.description link=tutorial.path author=tutorial.author min-height="250px" image="/images/icons/yt_icon_rgb.svg" %}
+			{%- for video in videos -%}
+				{% include youtube_card.html title=video.name description=video.description embed=video.embed link=video.path author=video.author min-height="250px" image="/images/icons/yt_icon_rgb.svg" %}
 			{%- endfor -%}
 			</div>
 		{%- endfor -%}