I think the gray bars are because your group webcast resolution is not using multiples of 16 for both dimensions, and
Blue Iris or the video decoder or something isn't padding the video properly. The red box I can't say for sure but it is probably having the webcast resolution too low.
You should change the resolution in Blue Iris:
With your All cameras group in particular, I think you could improve the layout by widening the frame until Blue Iris lays out the cameras in two rows instead of three. There would be more black space above and below but less within the video stream itself, making it more efficient. You can tweak the width and height of each group frame as much as you want to optimize the layout. Just remember to use multiples of 16 in both dimensions. This site can build you a handy list of multiples of 16:
Multiples Calculator
Also I think if you exceed 1920 in any dimension, you may cause Blue Iris's Android or iOS apps to crash. At least that seems to make the Android app crash for me.
What is the CPU model and normal CPU usage % on your BI server? What is the CPU in the device you are viewing with? How much CPU does Edge use while viewing H.264 in UI3?