SoundCloud

SoundCloud is a non-Williams service that hosts audio for sharing on the web.

Automatic embedding

WordPress can automatically embed SoundCloud audio clips in your page/post- all you have to do is put the SoundCloud URL on a line by itself.

Getting a SoundCloud URL

1. Find your song or music clip on SoundCloud.

2. Find the share icon, located below the song (outlined in red below). Depending on how large your screen is, it may or may not have the word “Share” next to it. Clicking on the icon will launch a popup window.

soundcloud-share1

3. Copy the URL in the popup window, located beneath the social media icons.

soundcloud-share2

Overview

WordPress allows you to automatically embed video, audio and other content from most popular media hosting sites simply by placing a URL on a line by itself in a page or post.

Full list of supported sites

Getting the URL

Finding the URL to paste into WordPress is a bit different for each media hosting site. In most cases, you’ll be looking for a share icon that looks something like one of these:

shareicons

More specific instructions for finding the correct URLs, and demos of the embedded content, can be found on these pages:

Inserting the URL

This example uses a YouTube video, but the process is the same for all automatically embedded media: simply paste the URL on a line by itself, as shown in the “correct” example below.

embed1

Preview

If you are editing your page/post in visual mode (orange arrow, below), you will see a preview of your movie (or other type of content) where you placed the URL.

Embedded content toolbar

Click on the preview of your embedded content to reveal a toolbar, outlined in red below. To edit the embedded content’s URL, click the pencil. To delete the content, click X.

embed2

  • This is useful if you don't want to clutter your page with videos, or if you have a gallery of screenshots you want to link to the corresponding videos. Important: Be sure you use the 'embed' version of the URL.

    • For a text-only link, use the text editor (rather than the visual editor) and add the following to the link HTML: data-featherlight="iframe"

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" data-featherlight="iframe">Youtube</a>

    Youtube

    • For an image link, add the following to the link html (make sure there is only one 'class' attribute or the link will break): class="type-video" 

    <a href="https://www.youtube.com/embed/sIpBh3-hb2s" class="type-video"><img class="alignnone size-thumbnail wp-image-4447" src="https://admission.dev.williams.edu/files/Zach-Babat-150x150.png" alt="" width="150" height="150"></a>


Demo

Here's what an embedded SoundClound player looks like: