Gideon Williams

Improving Layout of Embedded Media

Blog Post created by Gideon Williams on Jan 15, 2018

I embed a lot of media in Content pages from YouTube to PowerPoint to an assortment of Web 2 tools (Web 2.0 Tools)

A quick an easy tip to make them flow with other text is to add in a border with a slight gap.  I use the following HTML

style="padding: 1px; border: 1px solid black;" 

I add this feature just after the first iframe tag eg

<p><iframe style="padding: 1px; border: 1px solid black;" src="https://onedrive.live.com/emb..........

What this does is add in a border around the iframe which makes it look a little more presentatable eg

 

BEFORE ADDING BORDER

 

AFTER ADDING BORDER

The border comes into play when there is little colour to define the edges.

 

 

BORDERS FOR IMAGES
It also works really well for images. I make use of a lot of quiz questions for my GCSE Physics class. Adding in a border to images just makes it stand out a bit more:

 

The code I use is:

style="border: 1px solid #000000; padding: 2px;" 

 

Which I add afterwords to the HTML just after the img section eg:

<img style="border: 1px solid #000000; padding: 2px;" src="https://bsn.instructure.com/asses_questions/309

 

And does this....

Outcomes