How to fit iframe content according to a mobile device?-CodePudding

I have to embedd an iframe to an external website. I don't have any control on the external website. I have to put my website inside this iframe where I can only tell the size of the iframe. However I would like that the content inside the iframe adapts to the mobile device.

I have already done this: <meta name="viewport" content="width=device-width, initial-scale=1.0">

I can't wrap the iframe with a div. Because I don't have access to the external website. I was only given the iframe, in which I can set the dimension and that's it. So I would like to know, how can I solve this issue? How to adapt the content present inside of an iframe, to a mobile device?

CodePudding user response：

One possible solution is to set its width as 100%.

It should work both to desktop & mobile screens.

CodePudding user response：

This may be able to help you. I had a similar problem and this was the solution.

 <iframe Class="Edit1" id="Edit1" width="342" height="223" src="https://www.youtube.com/embed/????????" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Video Loading...</iframe> 

 <script>
 window.addEventListener("resize", myFunction);

  function myFunction() {
    var $myWidth = document.body.clientWidth;
        $myWidth=($myWidth * (4 / 4));
     var $myHeight= ($myWidth / (16/9));    // var myHeight="900.876976978";
        $myHeight= Math.round($myHeight);
    
    document.getElementById("Edit1").width = $myWidth -40;
    document.getElementById("Edit1").height = $myHeight;
  }
 </script>