BC Digital Classroom Access Widget/Code snippet

To create an widget to display the BC Digital Classroom access page resources within an iframe on your school or district web pages; you or your IT/ web support person(s) must have the ability to access and edit the code (HTML and 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 and is not considered to be a ‘responsive’ design which means there is more likely to be page display problems on mobile or small display devices. However, it is a simple solution to implement and apply

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 display devices. Note that the underlying content may not be responsive which may result in page rendering issues

Add the following HTML iframe directive and CSS code to the page. To specifically position and size the iframe container will require further understanding of CSS and the design elements, and the CSS of your page or site. Refer to the W3schools at the bottom of this page or to your IT/web support person(s).

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 Access Widget/Code snippet

Member Access