Gideon Williams

Improving Layout of Embedded Media

Blog Post created by Gideon Williams Champion 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="

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





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



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="


And does this....