Audio & Video in WordPress

by Drew Conroy


Posted on January 13, 2019


A magnified glass looking at audio and video sound waves

Note: This post is from our video tutorial on "Audio & Video in WordPress"

Today we are going to take a look at working with audio and video in WordPress.

If you want to embed video and audio into your website, you are better off uploading your videos to websites like YouTube, Vimeo and Dailymotion. Then embed the content into your WordPress website. That way, your using their resources instead of your own.  

There a couple of ways to embed video; the first is to copy and paste the url into your page or post.  Go to YouTube and find a video, then copy the URL from your browser's address window.

From back inside your wordpress dashboard, hover your cursor over posts then click “Add new” from the flyout.  Add a title to your post, then past the URL you copied from YouTube into your editor.

WordPress will start the embedding process. When it’s through you will be able to see a preview of the video. Then toggle the post format to video from the right side panel and publish your post.  Once your post is published click “Review Changes” or “View Post” depending on which version of WordPress you are currently using.

You can see how WordPress has embedded the video into your content. WordPress has the ability to embed video from a variety of difference video sources. Go to https://codex.wordpress.org/Embeds. I will put this URL down in the comments section for you to review.

The second method for embedding videos is to do it manually

 This is an option if the first method does not work properly or if you want more control over it.  Go back to YouTube again and below the video you want to click “Share” then click the “Embed” tab. Select the options you want, then click the copy tab.

From back inside your WordPress editor create a new post and add a title. Then in the editor you want to select the “Text” tab because we are pasting code this time.  If you were not to select the “Text” tab and left it set to “Visual”. After you paste the code, it would not render properly.

For example, (paste the code with the visual tab selected, click update, then preview it). As you can see, we only see text from the code because it has not rendered properly.

Let’s go back and delete the code, then select the “Text” tab, and paste the code. Select “Publish” then view the post. As you can see the code has rendered and we see the video. The first method is the prefered way of embedding videos because you do not have to mess around with code.   

WordPress also supports audio files

If you do not have any audio files on your computer, I am going to show you how to get some. Go to bensound.com. It’s a site that has royalty free music you can download.

Once you are at Ben Sound, you can download any of the songs on the page by clicking the download tab. That will bring up a window and you will want to click the download tab again. Download 4 for 5 songs because we will need them further on down in this tutorial.

From your post, hover your cursor over “Media” on the left side panel. Then select “Add New” from the flyout. This is the same process you used for uploading images.

If you have not seen video #11 in this WordPress Beginner Tutorials series, you might want to check it out. It specifically goes over using images in Wordpress.   

Once you have clicked the “Add New”, click the “Select Files” button or you can drag and drop your Audio file in the squared off area. We are going to use the “Select Files” button. Navigate through your computer until you find an audio file you want to use. In case you are unsure where you saved them, check your downloads folder.    

Once you have found your audio file you want to upload click the open button. You will see a progress bar on the right side of the page. Then click on Posts from the left navigation panel and go back to your post.

Next, place your cursor where you want the audio file in the post by left clicking. Then click the “Add Media” button.

Once you find your audio file, then click on it.  

From here, left click selecting the Audio file, then click the “Insert into Post” button down to the right. Then “Update”

`Click “Preview Changes” to view your post.  You should see a bar on the screen where you can start and stop the audio file and adjust the volume. You can also play a file by clicking on the track.  

Lets create a playlist. This will be very similar to the gallery we created from Video #11. From the top admin bar hover your cursor over “New” then select page from the dropdown to create a new page. Add a title for this page. Make sure the “Visual” tab is selected and then add some content in the editor like “This is my playlist”.

Select the “Add Media” button, “Upload files” and then “Select Files”.  Find your audio files and left click on one of them. Hold down the Ctrl key and continue to left click on the other audio files until they are all highlighted. Then click the “Open” button to upload them all.

All the audio files you selected will be indicated by the check mark in the upper right corner. Click the text link “Create Audio Playlist” Then down to the right click the “Create a New Playlist” button.

On the following page select the settings you want, and just like with image galleries, you can drag the audio files in the order you want them. When you have everything set the way you want, click the “Insert Audio Playlist” button.

Now publish and preview your changes. You now have an audio playlist.

We are now going to go over the Media Library which we have looked at a few times already. The Media Library keeps all the files you have uploaded. To access the Media Library just click on the Media Library in the left hand side navigation menu.

Up in the top left you can select list or grid view. If you switch to list view then click on “Screen Options”, you can check off which items you would like to see.  You can filter a search by media item type and date. Any media type not directly attached to a post or page will show under “Unattached”. You can also search through the media items from the search box on the top right side of the page.

Similar to post and pages, when you hover your cursor over an item other options will appear that allow you to “Edit”, “Delete Permanently” or “View” the Media.

If you want to upload Media into the Media Library click the “Add New” button at the top.  On the following page you can drag or drop your media in or click the “Select Files” button. Then navigate to the file you want to upload and click “Open” to upload it.

If you find you are having trouble using this “Multi-file Uploader” you can use the  “Browser Uploader” instead. Just click the “Browser Uploader” text link. Once you click the text link, click on “Choose File” and navigate to your media file, repeating the same process.  Make sure you click the “Upload” button once you have made your selection.

Examples of PDF template covers

Next, we are going to upload and edit a PDF file but first we need to get a PDF. That’s unless you have one already on your computer.

Check out PDF Drive. Once you click the link and are at the site, click the title of any of the books that are listed on the page.  Then on the following page click the “Download” button. You will have to wait a few moments for the “Go to PDF” button to appear.  Click on that and it will start downloading a PDF version of the book onto your computer.

Back inside your WordPress Dashboard, click on “Media” from the left side menu. Once you are in the Media Library click the “Add New” button at the top. From here, navigate and upload the PDF you just downloaded.  

Once the PDF has completely uploaded you will see a text link on the right side with “Edit”. Click on it. The following screen will give you the option to edit the Title, Caption, and Description for this PDF.  Fill in whatever details you want, then click the “Update” button.The caption is for a text link that links to the PDF.

To see what the PDF looks like on a page or post. Click the “View Attachment Page” link from the Admin menu.  As you can we have the title, the text link that links to the PDF, and then the description. If you click the link, it opens up the PDF like the following.

Click the back button in your browser, then click “Edit Media” from the admin toolbar.

Click “Media” again on the left hand side to go back into the Media Library. This time we are going to edit an image. When editing images from the Media Library, it allows you to make minor adjustments in the image editor.

Select an image by clicking on it. Here we can edit the meta data for this image. Then down on the left hand side you will see a “Edit Image” button.  Once you click on it, you will see that this screen looks familiar from video #11.

Just like before, we can crop, rotate or flip an image. We can also redo or undo any changes that we have made. If you want to scale the image just enter a number in either of the boxes then click the “Scale” button.   Wordpress will automatically scale down the other value for you.

You can also specify the Crop Selection Aspect Ratio by holding down the “Shift key” while dragging your cursor over the image. Once you have selected the section you want, you can choose what sizes these changes will apply too. You have the choice of “All Image Sizes”, “Thumbnails”, and “All Sizes except thumbnail”. Click on the crop icon in the corner to finish the edit. Then click the “Save” button to apply the changes.

Once you are done making your changes to the image and meta data, click the “Update” button to make them stick.

If you decide you do not want to make the changes to the image you can restore it to its original state.  To do this, go back into the image editor by clicking the “Edit Image” button.

In the “Image Editor” you will now see a drop-down with “Restore Original Image” Click it to restore the image. Do not forget to click “Update” once you have restored the image.

Check out our WordPress Beginner Tutorials Series on our YouTube Channel.

Thanks for Reading - Have a Great Day!

Drew & the WebStop.net Crew