Before I try to tackle these requests, I have to ask, WHY put the carousel in an iframe??? That’s a really bad way to do this, and iframes are bad for SEO. Also, when I view your site on my 24" monitor, your iframe is not tall enough to display the embedded page (the bottom of the “imac” gets cut off). You’re probably not seeing this because you’re working on a laptop screen. If you’re going to do website development for clients, you need to be able to test your sites across all possible screen sizes. You should consider buying an inexpensive 23"-24" that you can plug into your laptop for testing your sites above the 1200px breakpoint.
To make the opacity of the iframe content .7, you must do it to the page you’re embedding. The embedded page is not a “background” inside the iframe, so you can’t change it’s opacity in that manner. If you change the iframe’s opacity, you will change it, and everything inside it. You might be able to place a div with a semi-transparent white background inside the iframe and stack it above the embedded content using z-index. I’d have to play with that. But really, just ditch this whole “page embedded in an iframe” method and put the slideshow directly on the page.
As far as the height of the iframe, again this creates problems because you’re using it in a bootstrap column that is resizing in width along with the viewport size, so you’re stuck having to set different fixed heights for the iframe for each breakpoint depending on the height of the page you’re embedding, which is changing dynamically and leaving a big empty space below it. If you just embedded the carousel in the column, then it’s height would adjust automatically as the carousel’s height changed.
Ditch the iframe and do this the right way, and all your difficulties will be solved.