cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
brian_t_anders
Community Contributor

How to remove YouTube thumbnail in content blocks?

Jump to solution

I have links to YouTube videos using the href tag in HTML. Whenever I save the page, a thumbnail shows of the YouTube video, however, I just want the link to show as text and not show as a thumbnail as well. How can I achieve this?

2 Solutions

Accepted Solutions
kmeeusen
Community Coach
Community Coach

Hi  @brian_t_anders ‌

Hmmm................ it wasn't that long ago that folks were asking for the thumbnail - just shows to go yah!

I do not know a way, but I am certain that some of those quick-minded, sharp-brain folks in the https://community.canvaslms.com/groups/designers?sr=search&searchId=395333d9-9492-44bc-8e2b-91869d24...‌ and https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=d077c9e9-d885-4cb7-9457-...‌ groups.

Agent K

View solution in original post

Stefanie
Community Team
Community Team

OK,  @brian_t_anders ‌, I played with it. Here's the code (first piece is with a thumbnail, second bolded piece is without):

<p>As described in <a href="https://community.canvaslms.com/docs/DOC-10367-415241508">YouTube guide</a></p>
<p><a class="" title="LOLCats" href="https://youtu.be/aI_Ftw4UEBw" data-preview-alt="">LOLCats</a></p>
<p> </p>
<p>Here is some text for this to appear inline <a class=" inline_disabled" title="LOLCats" href="https://youtu.be/aI_Ftw4UEBw" data-preview-alt="">LOLCats</a> more text</p>

Here's how it looks on the page:

243718_disable-thumbnail.png

So it's that " inline_disabled" part you'll want to add to the HTML.

View solution in original post

8 Replies
kmeeusen
Community Coach
Community Coach

Hi  @brian_t_anders ‌

Hmmm................ it wasn't that long ago that folks were asking for the thumbnail - just shows to go yah!

I do not know a way, but I am certain that some of those quick-minded, sharp-brain folks in the https://community.canvaslms.com/groups/designers?sr=search&searchId=395333d9-9492-44bc-8e2b-91869d24...‌ and https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=d077c9e9-d885-4cb7-9457-...‌ groups.

Agent K

View solution in original post

Stefanie
Community Team
Community Team

 @brian_t_anders , offhand I don't know the HTML that disables the thumbnail--I'd have to play around with it to figure it out--but you might not find it more time consuming to recreate the YouTube video links on the RCE side of things and enabling the radio button that reads "Disable inline previews for this link" (handy for in-context videos). You'll see that described at https://community.canvaslms.com/docs/DOC-10367-415241508 

Stefanie
Community Team
Community Team

OK,  @brian_t_anders ‌, I played with it. Here's the code (first piece is with a thumbnail, second bolded piece is without):

<p>As described in <a href="https://community.canvaslms.com/docs/DOC-10367-415241508">YouTube guide</a></p>
<p><a class="" title="LOLCats" href="https://youtu.be/aI_Ftw4UEBw" data-preview-alt="">LOLCats</a></p>
<p> </p>
<p>Here is some text for this to appear inline <a class=" inline_disabled" title="LOLCats" href="https://youtu.be/aI_Ftw4UEBw" data-preview-alt="">LOLCats</a> more text</p>

Here's how it looks on the page:

243718_disable-thumbnail.png

So it's that " inline_disabled" part you'll want to add to the HTML.

View solution in original post

brian_t_anders
Community Contributor

This worked, thanks!! Love the LOLcats!

jesseharrison
Community Participant

Hi all

Using the "Link" button in the WYSIWYG, you can "Disable inline previews for this link" without going into the code.

243959_pastedImage_1.png

Cheers

Jesse

ronmarx
Community Contributor

stefaniesanders‌, Thank you again for posting the <a class="inline_disabled"> tag for use with YouTube URLs to hide the preview thumbnail. I know you the conversation was from last year, but for IDs like me who are coding a lot on the fly and under deadline, Canvas Community is a great resource instead of libraries full of browser bookmarks!

Thank you!

Always a pleasure to be able to help,  @ronmarx , even if it's from many-months-ago me!

ronmarx
Community Contributor

This special "easter egg" feature is only available for YouTube videos.

Vimeo videos don   YouTube videos need this feature to help IDs conform to design motifs.

Vimeo videos don't need this feature toggler.                         YouTube videos need this feature to help IDs conform to design motifs.

It would be nice if Canvas course-native videos had the same display features:

Very ugly, static video thumbnails is all Canvas users get when placing videos in pages.

Very ugly, static video thumbnails is all Canvas users get when placing videos in pages. You can't even center the videos in the page. (This example shows two videos, side-by-side, using the Canvas Style Guide's class="col-xs" and class="border-round" code.