YouTube-Videos als Text-Link einbinden

Links für YouTube-Videos werden oft nicht als Text-Links, sondern als Vorschau des Videos selbst angezeigt. Das kann sehr lästig sein. Insbesondere, wenn man nicht viel Platz hat, z.B. auf den Screens von Smartphones. Als Lehrkraft sollte man sich nicht die Entscheidungsfreiheit nehmen lassen, auch mal als bloßen Text-Link für ein YouTube-Video darzustellen. Wie das geht, zeige ich euch in dem Video:

Einen Link attraktiver gestalten

Diese Text-Links sind zwar platzsparend, aber nicht besonders attraktiv. Man kann die Links jedoch sehr einfach schöner gestalten. Mit einer Kombination von zwei Elementen von Bootstrap sieht es dann so aus:

Vorher und nachher: Vergleicht selbst. Was gefällt euch besser?

Um den Text-Link zum YouTube-Video aufzuhübschen, müsst ihr den folgenden Code als HTML an die Stelle einfügen, wo der Link erscheinen soll.

<p> 
<button type="button" class="btn btn-success"><i class="fab fa-youtube"></i> ERKLÄRTEXT, Z.B. VIDEO</button><button type="button" class="btn btn-outline-success"><span style="color: black"><a href="LINKADRESSE">TITEL, DER ALS TEXT ERSCHEINT</a></span></button>
</p>

Durch den Code werden zwei Buttons von Bootstrap kombiniert. Wie ihr die Buttons selbst ändern könnt, habe ich in einem anderen Video gezeigt.

Die blauen Textstellen müssen mit dem individuellen Text und der Linkadresse angepasst werden.

Die orangefarbene Textstelle verweist auf ein Icon des Font-Awesome. Das könnte ihr dem Link entsprechend ändern. Der Font-Awesome bietet für jede Gelegenheit ein Icon, das man kostenlos verwenden darf. Bedient euch!

Diese Technik, mit Bootstrap Buttons einen Link optisch ansprechender zu gestalten und damit auch für die Teilnehmerinnen und Teilnehmer benutzerfreundlicher zu machen, kann natürlich für jeden Link, nicht nur einen Video-Link, benutzt werden.

Die Voraussetzung dafür ist, dass euer Thema für Moodle (oder ein anderes LMS) auf Bootstrap aufgebaut ist.

Weitersagen …