How to insert links to YouTube-Videos as text

Links for YouTube videos are often not displayed as text but as a preview of the video itself. Displaying a preview can be very annoying, especially if you don’t have much space, e.g. on smartphone screens. Or if you just don’t want to break your flow of the text. As a teacher, you should not let yourself be deprived of the freedom to display a YouTube video as a plain text link. In the video I show how to embed links to YouTube videos in Moodle as text and not as previews.

Improve the look of a link

These text links save space, but are not particularly attractive. However, it is very easy to make the links more beautiful. With a combination of two Bootstrap elements, it looks like this:

Compare before and after for yourself. Which do you like better?

To put some eye-candy to this link, you need to insert the following code as HTML at the place where you want the link to appear.

<button type="button" class="btn btn-success"><i class="fab fa-youtube"></i> TEXT WHICH GIVES AN IDEA OF THE SUBJECT OF THE VIDEO CONTENTS</button><button type="button" class="btn btn-outline-success"><span style="color: black"><a href="LINK REFERENCE">TITLE, WHICH APPEARS AS A LABEL</a></span></button>

The code combines two buttons from Bootstrap. I showed you how to change the buttons in another video, simply by changing the names of the buttons

You can adapt the blue text passages with your text and the link address.

The orange text refers to an icon of the Font Awesome. You can change this according to the link. The Font Awesome offers icons for every occasion. You can use those icons free of charge. Help yourselves!

Using bootstrap buttons to make a link more visually appealing and thus more user-friendly for participants can be used for any link, not just a video link.

This technique’s prerequisite is that your theme for Moodle (or another LMS) is built on Bootstrap. The most are, so try it out.

Weitersagen …