We Keep Coding

How can I print and concatenate all four content inside Iframes?

The image shows what it will look like when I print one of the Iframes I have, my problem is how can I join the other three Iframes (there almost same in height and width, actually look like this too) and I want to fill this whole print page with those three other Iframes content. Btw I use this Iframe cause I want to get the content from other page, and use the button in my main page to print or generate report with those.
Here's the Iframes
<iframe src="temperature(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top:-700px; width: 1000px;" name="temp" id="temp"></iframe>
<iframe src="turbidity(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="ntu"></iframe>
<iframe src="water-level(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="waterlevel"></iframe>
<iframe src="pH(1).php" scrolling="no" style="border: 0px none; margin-left: -1000px; height:200px; visibility:none; margin-top: -1000px; width: 1000px;" name="pH"></iframe>
And the button I use to print, but this thing can only print 1 of those four frames, I don't know how can I join the four and print them in one page with some approach out there... which is what I want to happen...
<button class="btn btn-primary btn-sm ml-5 float-right mr-4" onclick="frames['waterlevel'].print()">Generate Report</button>

change iframe width/height in js/jquery

I am working on a js/jquery code in which I want to override current css present in the html code below.
JavaScript/jQuery:
<script>
$("div.scribble-live").find("iframe").css("height", "200 px");
</script>
HTML Code:
<div class="scribble-live">
<div class="scrbbl-embed">
<iframe name="ee5bdd02" width="100%" height="15299px" frameborder="0" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="border: none; visibility: visible; width: 50px; height: 15299px; min-width: 100%;"></iframe>
</div>
</div>
Problem Statement:
The above js/jquery code doesn't seem to override the css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;") present in the HTML code above.
I tried with the following scripts as well but it doesn't seem to work.
<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
</script>
<script>
$("div.scribble-live").find("iframe").attr("height", "200px");
$("div.scribble-live .scrbbl-event").height("200px");
</script>

Everything seems to work. Might consider using .ready() callback on the iframe or use setTimeout() to wait before making the change.
$(function() {
setTimeout(function() {
$(".scrbbl-event").css("height", "200px");
}, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scribble-live">
<div class="scrbbl-embed">
<iframe name="ee5bdd02" allowtransparency="true" scrolling="no" title="scrbbl:event ScribbleLive Embed" src="" class="scrbbl-embed scrbbl-event" style="background: #ccc; border: none; width: 50px; height: 15299px; min-width: 100%;"></iframe>
</div>
</div>
Hope that helps.

Youtube video div overlay glitch

I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox

try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}

Javascript-Load URL from iFrame

I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code

How can I load URL content in main window

I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't have access to edit the code
Could you please help?
Thanks in advance.

You need to do it like this:
window.top.location.href = "http://www.google.com";