CODEWITHSUNDEEP
javascripthtmlcssgoogle-sites-2016
Edgar Manukyan
Edgar Manukyan

Reputation: 1301

Auto adjust heigth of Google Site embed code (html)

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>

Upvotes: 12

Views: 4974

Answers (2)

Anna L
Anna L

Reputation: 49

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>

Upvotes: 0

Saigon Republic
Saigon Republic

Reputation: 1

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.)

Upvotes: -2

Related Questions