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....