Auto adjust heigth of Google Site embed code (html)

Asked 7/3, 2021 at 21:59 Answered 31/7 at 18:32

javascript html css google-sites-2016

I am using Google Sites to embed HTML code, paste the code within the "Embed from the web" window. The length of the output is variable.

I wish there was a way to dynamically adjust the height of the parent iframe that Google Sites is using to host my HTML.

I know that I can use the Google Sites user interface to manually allocate more space and unfortunately the content is going to be different based on data from API, hence there is no way for me to know the height beforehand. Currently the vertical scroll-bar appears whenever the content overfills the allocated space and it does not look good.

I tried the following and it only removes the scroll bar without allowing me to see the content:

<script>parent.document.getElementsByTagName('iframe')[0].scrolling="no";</script>

The example Google Site is at https://sites.google.com/view/auto-ajust-gsite-embed/home

And this is the code I used in the above example site:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />

    <title>auto adjust google site embed</title>
  </head>
  <body>
    <div class="accordion accordion-flush" id="accordionFlushExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#flush-collapseOne"
            aria-expanded="false"
            aria-controls="flush-collapseOne"
          >
            Accordion Item #1
          </button>
        </h2>
        <div
          id="flush-collapseOne"
          class="accordion-collapse collapse"
          aria-labelledby="flush-headingOne"
          data-bs-parent="#accordionFlushExample"
        >
          <div class="accordion-body">
            Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-flush</code> class. This is the
            first item's accordion body.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#flush-collapseTwo"
            aria-expanded="false"
            aria-controls="flush-collapseTwo"
          >
            Accordion Item #2
          </button>
        </h2>
        <div
          id="flush-collapseTwo"
          class="accordion-collapse collapse"
          aria-labelledby="flush-headingTwo"
          data-bs-parent="#accordionFlushExample"
        >
          <div class="accordion-body">
            Placeholder content for this accordion, which is intended to
            demonstrate the <code>.accordion-flush</code> class. This is the
            second item's accordion body. Let's imagine this being filled with
            some actual content.
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Condenser answered 7/3, 2021 at 21:59 Comment(2)

Edgar, did you ever find out a solution for this? – Aglow 14/5 at 2:52

I did not, sorry. – Condenser 24/5 at 2:40

I spent a LOT of time investigating on your page, and came to the conclusion that there must be an element with a fixed, or max height that creates the scroll bar. Normally, a parent element will stretch vertically to accommodate any children, even if no heights are actually specified for any of them.

I wrote an example of how you can dynamically insert iframes of different heights (purposely made one shorter) and the parent divs (no height specified) simply stretch.

Therefore, I would suggest revising the structure of the page (which seems overly complex). I spent quite some time this afternoon, and still have no idea which element is actually the one with the scroll bar! :)

var content1 = `<iframe width="560" height="315" src="https://www.youtube.com/embed/DHfRfU3XUEo?si=prirIj_dJ1a1Wnw9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;

var content2 = `<iframe width="560" height="200" src="https://www.youtube.com/embed/DHfRfU3XUEo?si=prirIj_dJ1a1Wnw9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;

var iframe1 = document.querySelector(".iframe1");
iframe1.innerHTML = content1;

var iframe2 = document.querySelector(".iframe2");
iframe2.innerHTML = content2;  

var button1 = document.querySelector(".button1");
var button2 = document.querySelector(".button2");

var toggle1 = (event) => {
if (iframe1.classList.contains("invisible"))
{iframe1.classList.remove("invisible")}
else {iframe1.classList.add("invisible")}
}

var toggle2 = (event) => {
if (iframe2.classList.contains("invisible"))
{iframe2.classList.remove("invisible")}
else {iframe2.classList.add("invisible")}
}

button1.addEventListener("click", toggle1, false);
button2.addEventListener("click", toggle2, false);

body {
    background-color: aqua;
}

.iframe {
    background-color: yellow;
}

.button {
    background-color: green;
    padding: 10px;
    }

    .invisible {
        display: none;
    }

<div>
<div class="button button1">PRESS HERE!&nbsp;&rarr;</div>
   <div class="iframe iframe1 invisible">

   </div>
   </div>
    
    <div>
   <div class="button button2">PRESS HERE!&nbsp;&rarr;</div>
   <div class="iframe iframe2 invisible">

   </div>
   </div>

Fling answered 31/7 at 18:32 Comment(0)

-2

This is just a trick to have NEW google sites remove the vertical scrollbar: Expand the inserted "Embed < >" box's boundary. --[ Details: I expand the inserted "Embed < >" box's boundary to the size of about 11" x 7 ": horizontal to the max on the right side, vertical (down) to the end of the visible bottom to the monitor's screen. (I stop further downwardly expansion of said box because it moves very slowly starting from the bottom most of the screen). I think the box is large enough for my test. All tested views mobile/tablet/monitor show that the scrollbar is gone. ] --(Thank you for the HTML embed codes.)

Pogy answered 25/1, 2023 at 21:59 Comment(2)

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Declaratory 27/1, 2023 at 5:20

That's not auto-adjusting the embed, that;s using your mouse to drag the size of your embed to a fixed dimension in Google Sites. The OP said he may not know what the height may be. – Aglow 14/5 at 2:51

Recommended topics

Hot tags