1. Home
  2. Blackboard
  3. Blackboard for Instructors
  4. Blackboard: Display PDFs in Your Course Using iFrames

Blackboard: Display PDFs in Your Course Using iFrames

Embedding external site content via iFrame

You may experience difficulty adding embedded content from some sites via iframe. Pasting iframe embed code into the 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

As a side effect of the security changes, the process for embedding files has changed. To embed one of these files, the iframe src must use a relative “permanent” link for the file:

  1. Copy this code: 
    <iframe width="840" height="630"></iframe>
  2. Create an Item in Blackboard, name it, and click the HTML button in the text editor in Blackboard, which will open in a pop-up window. The figure below illustrates the location of the HTML button.

    Screen shot of the Blackboard rich content editor with the HTML editor highlighted on the bottom row of menu items, 2nd from the right.

  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 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 forward 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 HTML button again in the text editor. You will see the code that you previously pasted.
  8. After the height code, type src=”” and paste the relative path from Step 6 in between the quotation marks. Your final code should look this:  <iframe width="840" height="630" src="YOUR RELATIVE PATH"></iframe>
  9. Click “Update.” You will still see a yellow box placeholder for your iFrame. Then click Submit on the new item and your PDF should be placed in an iFrame. Congratulations for making it through these instructions successfully!
Updated on January 14, 2020

Was this article helpful?

Related Articles

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