1. Home
  2. Blackboard
  3. Blackboard for Instructors
  4. Blackboard – Embed PDFs in Your Course Using iFrames

Blackboard – Embed PDFs in Your Course Using iFrames

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.

  1. Copy this code (for use in Step 3): 
    <iframe width="840" height="630"></iframe>
  2. 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.

    arrow pointing to source code button

  3. 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.
  4. 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).
  5. 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.”Image showing selection of 360 view.
  6. 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. Image showing how to embed the permanent URL fragment
  7. 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.
  8. 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>
  9. 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.
Updated on December 23, 2021

Related Articles

Not the solution you were looking for?
Don’t worry we’re here to help!
Submit a Help Ticket