Manually Set Up Responsive Player Iframe

Then the player will resize as the iframe is sized in the web page code. 

If your CMS software or HTML editor does not allow you to make a responsive container for your stream player within the editor itself, or if it does not allow enough positional adjustment in the CMS controls, then you can easily do it manually by modifying the page code. You can also use the site CSS for precise positioning of the player iframe to match site content at dirfferent resolutions for different devices etc. Just follow the example here. It involves setting up a class and a new CSS style sheet for the wrapper (or you can add it to your existing sheet if you prefer) and view the source of this page to help with understanding the procedure.

You need to either adjust your CSS style sheet or make a second custom one. We have made a separate CSS style sheet to simplify explanation and called it custom. So first reference the new stylesheet in page header similar to your existing sheet e.g. this page is referenced:-
<link rel="stylesheet" href="css/custom.css"> 

Then set a class for your new wrapper like this:- <div class="html-element video-container iframe"</div>

Then put your iframe code in a wrapper so you can reference it i.e. between the <div> and </div> tags e.g. <div> your iframe code </div>

Then make the style sheet as below and save it in the referenced location from the header and save it as custom.css

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
.video-container iframe {
position: absolute;
left: 0;
width: 100%;
height: 100%;

Then the iframe will resize with the page. The player is responsive and so will resize with the iframe.