May 21, 2017
Due to the amount of bandwidth and disk storage necessary to host videos, we do not host videos on dixie.edu. We do however embed videos hosted on other sites. If you have a video you would like to have on your page, get it uploaded on either youtube (free for everyone) or use DSU’s “vStream” video hosting service. If you choose to upload your video to youtube, please create a google account for your department to share, or ask Web Services to upload the video for you (that way, if you ever leave your department, someone else will always have access to that video).Once your video is online and you have a URL for the video, you’re ready to get add it to your site.
Adding Videos to a Page
Adding videos to pages requires “administrator” level access. If you are departmental content editor, you will have to ask your web intern or the web team to add the video for you. Send them the URL or your video file(avi,mp4,etc) and they will get it up for you. For web interns and new members of Web Services, directions on how to add videos are below.
Step by Step Instructions
The easiest way to add a video to a page is using an <iframe> tag. An iframe essentially loads another webpage inside of the frame. Iframes can be used for displaying news feeds or social media posts as well, but for now we’ll focus on getting a video up.
Adding a Youtube Video
Adding videos from youtube is easy.
- Start by going to your video’s youtube page.
- Click the “Share” button
- Next click “Embed”. Copy the code it generates for you.
- Come back to WordPress. Open the page you want to add the video to, and click the “Text” tab.
- Paste the code in.
- To make sure your video works on smaller screens and mobile devices, you need to add a little extra code.
- First, add <div class=”videoWrapper”> just before the code from youtube.
- Next add </div> just after the youtube code.
- That’s it! You’re all set.
Here’s an example:
Adding a vstream video or custom iframe
Although we can embed vstream videos, the vstream system does not auto-generate the iframe code for us. We’ll have to code it ourselves, but it’s not hard.
We’ll start with the <iframe> tag. It looks like:
<iframe src=”” height=”” width=””></iframe>
Now we need to fill it in with the information for your video. Copy the URL for your vstream video. This will go in between the quotes for the “src” attribute. The width and height are the default width and height of your video. I would recommend picking a 16:9 aspect ratio, which would be “640” for width and “360” for height. You code should look something like this now:
<iframe src=”https://vstream.dixie.edu/DSC/Play/3c585dd85f354db3be9234d68cdff2e41d” height=”360″ width=”640″ ></iframe>
Lastly, we need to make sure it looks good on mobile too! Add <div class=”videoWrapper”> just before the iframe tag, and </div> just after the iframe. Now it should looks like:
<iframe src=”https://vstream.dixie.edu/DSC/Play/3c585dd85f354db3be9234d68cdff2e41d” height=”450″ width=”800″ ></iframe>
Congrats! It should be ready to go now! Hit publish/update and you’re done!