BC Digital Classroom Widget Support

Create a widget to display BC Digital Classroom Core Collection Access links

These instructions are a basic guide to creating an "iframe" to embed the BC Digital Classroom resource links directly into you own pages.

NB You, or your IT/ web support, must have the ability to access and edit the code (HTML and possibly CSS) that renders the pages for the school or district web site.

There are 2 basic options to create the widget.

Option 1: HTML Code Only

This uses HTML code only, does not give the same level of control over page rendering as pages that include CSS, however it is a simple solution to implement and apply and may be fine for basic needs
Add the following HTML iframe directive to the page. Alter the values for height, width and scrolling as desired

Option 2: HTML and CSS Code

This uses both HTML and CSS code which creates a widget that is fully responsive and renders better pages on all devices including mobile and small displays.
Add the following HTML iframe directive and CSS code to the page. To specifically position and size the iframe container appropriately for your specific site will require further understanding of CSS and the design elements, and the CSS of your page or site. Refer to the W3schools links at the bottom of this page or to your IT/web support person(s) as needed.

HTML code:

CSS Code:

.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
padding-top: 75%;
}

Notes:

If your website is not using HTTPS, an error message may occur or the iframe content may not load. It is strongly recommended that all school or district websites default to the use of HTTPS.

Further reference links/guides from W3schools

iframe: https://www.w3schools.com/tags/tag_iframe.asp
Responsive web design: https://www.w3schools.com/html/html_responsive.asp
Test your code before changing your site: https://codepen.io/pen/
CSS tutorial: https://www.w3schools.com/css/

BC Digital Classroom Widget Support

Create a widget to display BC Digital Classroom Core Collection Access links

Member Access