I'm facing a challenge embedding a camera feed into a webpage that needs to display manual focus and servo controls. The issue lies in the content scaling within the iframe.
Even though the iframe boundary resizes according to the window's width, the embedded page (an mjpeg page created by an application) is not scaling correctly.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ustreamer Webcam</title>
<style>
.icontainer {
border: 1px solid red;
position: relative;
padding-bottom: 100%; /* set the aspect ratio here as (height / width) * 100% */
height: 0;
max-width: 100%;
}
.icontainer iframe {
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='icontainer'>
<iframe src='http://abc.def.com:5001/webcam/?action=stream' allowfullscreen></iframe>
</div>
</body>
</html>
Is there a way to resolve this issue? Unfortunately, I have limited control over the source page unless absolutely necessary which may bring about additional complications.