how to create page with contain iframe full page responsive and access others website in nuxtjs

iframeFullPage.vue

<template>
  <div class="iframe-container">
    <iframe
      class="iframe"
      :src="iframeUrl"
      allowfullscreen
      scrolling="yes"
      ref="iframe"
      @load="handleIframeLoad"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: 'https://www.example.com', // set your own URL here
    };
  },
  methods: {
    handleIframeLoad() {
      // Adjust the height of the iframe to match its content
      const iframe = this.$refs.iframe;
      const body = iframe.contentWindow.document.body;
      const html = iframe.contentWindow.document.documentElement;
      const height = Math.max(
        body.scrollHeight,
        body.offsetHeight,
        html.clientHeight,
        html.scrollHeight,
        html.offsetHeight
      );
      iframe.style.height = `${height}px`;
    },
  },
};
</script>

<style>
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>