iFrames display PDFs right in Blackboard
Some documents (e.g., the syllabus, the course schedule, etc.) may be frequently viewed by students. It can be a little time-consuming to have to download a document in order to, for example, view a due date. Embedded PDFS, using iFrames, will display the document right within blackboard. Multipage documents will include a scrollbar. iFrames allow users to view the document without downloading, while still having options to download or print, as in this example:
Embedding external site content via iFrame
You may experience difficulty adding embedded content from some sites via iframe. Pasting iframe embed code into the Source Code/HTML box in the content editor may not save as expected for some sites. If you are attempting to embed material from an external site and encountering trouble doing so, please contact blackboard@uvm.edu and include the steps you are taking to embed, as well as the embed code and url you are using.
Embedding PDF files from the content collection
If you embedded files previous to Summer 2019, security changes affected the process for embedding files. Please follow these steps.
- Copy this code (for use in Step 3):
<iframe width="840" height="630"></iframe> - Create an Item in Blackboard (where you wish your students to see your PDF), name it, and click the Source Code button (which looks like < >) in the text editor in Blackboard, which will open in a pop-up window. The figure below illustrates how to find the Source Code button.
- Paste the code that you copied in Step 1 into the pop-up window and click “Update.” You will see a yellow box placeholder for your iFrame. Then click Submit on the new item.
- Go to the Content Collection (Course Files) for the course in Blackboard on the left menu (first option under the control panel) and upload your PDF (if you have not previously uploaded it).
- Locate your PDF within the Content Collection (if you have many files, you can search for the file using the search tool on the left menu), and click on the grey chevron to the right of the file name, then select “360˚ View.”
- Copy only the relative path of the Permanent URL, including the preceding slash (i.e. /bbcswebdav/xid-43414430_1). Don’t include https://bb.uvm.edu.
- Go back to your content area and click Edit on the Item that has the placeholder box. Click the Source Code (< >) button again in the text editor. You will see the code that you previously pasted.
- After the height=”value” leave a space and type src=”” Then paste the path you copied in Step 6 in between the src=”” quotation marks. Your final code should look like this:
<iframe width="840" height="630" src="YOUR PATH"></iframe> - Click “Update.” You will still see a yellow box placeholder for your iFrame. Then click Submit and your PDF should be placed in an iFrame.