by Drew Conroy
Posted on January 13, 2019
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
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
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
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.
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.
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
series, you might want to check it out. It specifically goes
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
area. We are going to use the “Select Files” button. Navigate
through your computer until you find an audio file you want to
In case you are unsure where you saved them, check your
Once you have found your audio file you want to upload click
open button. You will see a progress bar on the right side of
page. Then click on Posts from the left navigation panel and go
to your post.
Next, place your cursor where you want the audio file in the
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
bar on the screen where you can start and stop the audio file
adjust the volume. You can also play a file by clicking on the
Lets create a playlist. This will be very similar to the
created from Video #11. From the top admin bar hover your cursor
over “New” then select page from the dropdown to create a new
Add a title for this page. Make sure the “Visual” tab is
and then add some content in the editor like “This is my
Select the “Add Media” button, “Upload files” and then “Select
Files”. Find your audio files and left click on one of
Hold down the Ctrl key and continue to left click on the other
files until they are all highlighted. Then click the “Open”
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
Playlist” Then down to the right click the “Create a New
On the following page select the settings you want, and just
with image galleries, you can drag the audio files in the order
want them. When you have everything set the way you want, click
“Insert Audio Playlist” button.
Now publish and preview your changes. You now have an audio
We are now going to go over the Media Library which we have
at a few times already. The Media Library keeps all the files
have uploaded. To access the Media Library just click on the
Library in the left hand side navigation menu.
Up in the top left you can select list or grid view. If you
to list view then click on “Screen Options”, you can check off
items you would like to see. You can filter a search by
item type and date. Any media type not directly attached to a
or page will show under “Unattached”. You can also search
the media items from the search box on the top right side of the
Similar to post and pages, when you hover your cursor over an
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
New” button at the top. On the following page you can drag
drop your media in or click the “Select Files” button. Then
to the file you want to upload and click “Open” to upload it.
If you find you are having trouble using this “Multi-file
you can use the “Browser Uploader” instead. Just click the
“Browser Uploader” text link. Once you click the text link,
“Choose File” and navigate to your media file, repeating the
process. Make sure you click the “Upload” button once you
made your selection.
Next, we are going to upload and edit a PDF file but first we
to get a PDF. That’s unless you have one already on your
Check out PDF Drive.
Once you click the link and are at the site, click the title of
of the books that are listed on the page. Then on the
following page click the “Download” button. You will have to
few moments for the “Go to PDF” button to appear. Click on
that and it will start downloading a PDF version of the book
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
Once the PDF has completely uploaded you will see a text link
the right side with “Edit”. Click on it. The following screen
give you the option to edit the Title, Caption, and Description
this PDF. Fill in whatever details you want, then click
“Update” button.The caption is for a text link that links to the
To see what the PDF looks like on a page or post. Click the
Attachment Page” link from the Admin menu. As you can we
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
Click the back button in your browser, then click “Edit Media”
the admin toolbar.
Click “Media” again on the left hand side to go back into the
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
for this image. Then down on the left hand side you will see a
Image” button. Once you click on it, you will see that
screen looks familiar from video #11.
Just like before, we can crop, rotate or flip an image. We can
redo or undo any changes that we have made. If you want to scale
image just enter a number in either of the boxes then click the
“Scale” button. Wordpress will automatically scale
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.
you have selected the section you want, you can choose what
these changes will apply too. You have the choice of “All Image
Sizes”, “Thumbnails”, and “All Sizes except thumbnail”. Click on
crop icon in the corner to finish the edit. Then click the
button to apply the changes.
Once you are done making your changes to the image and meta
click the “Update” button to make them stick.
If you decide you do not want to make the changes to the image
can restore it to its original state. To do this, go back
the image editor by clicking the “Edit Image” button.
In the “Image Editor” you will now see a drop-down with
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