Summary of "How to do More with Google Sites and use Advanced embed features!"

Overview

This video tutorial (described as “flipped classroom tutorials”) demonstrates four advanced features you can add to new Google Sites by embedding external HTML/CSS/JS components—primarily using Bootstrap 3 plus custom code—since these features aren’t natively available in Google Sites.

Four advanced Google Sites features demonstrated

Animated header (GIF)
- Replace a static header with an uploaded animated GIF.
- Recommendation: use something calm/peaceful and not distracting.
- Goal: make the site header visually dynamic.
Slideshow / carousel (Bootstrap 3 embedded)
- Create a Bootstrap carousel based on W3Schools’ Bootstrap 3 tutorial/examples.
- Key capabilities:
  - Auto-advance to the next image
  - Left/right controls
  - Indicator dots to jump to a slide
- Example workflow:
  - Generate carousel HTML using W3Schools “Try it yourself”
  - Paste the code into Google Sites via Embed → embed code
  - Provide images using shareable Google Drive links
  - Convert Drive links by changing the URL to an export?view style format so images render correctly inside the external embed
  - Optionally remove indicator dots or navigation arrows by deleting corresponding parts of the code
  - Update image URLs and alt text
Collapsible / fold (Bootstrap accordion)
- Use a W3Schools Bootstrap collapsible/accordion example to create expand/collapse sections.
- Important note: because it’s rendered via an iframe-like embed, the embed must have enough height/space so expanded content is visible.
- Customization includes renaming accordion items (e.g., “item 1 / item 2 / item 3”).
Material-style card UI (custom CSS + HTML)
- Uses custom CSS/HTML rather than Bootstrap panels.
- Includes:
  - Font customization (e.g., Roboto) via Google Fonts
  - Box-shadow styling with a stronger shadow on hover
  - Editable title/subtitle text sizing (e.g., heading sizes like header 1/2/3/4)
  - Image embedding using the same Google Drive export link trick
- After insertion, a card preview is shown, followed by advice to resize/center it for readability.

Common workflow / setup (technology focus)

Start with a blank Google Site created in Google Drive.
Use two external links referenced in the description:
- W3Schools Bootstrap 3 tutorial (Bootstrap 3 framework: JavaScript/HTML/CSS for responsive sites)
- A second link describing how to modify Google Drive share links so embedded content displays properly
Primary implementation method:
1. Build HTML in W3Schools “Try it yourself”
2. Copy the resulting embed code
3. In Google Sites, go to Embed → embed code → Next → Insert

Guide/tutoring notes

This isn’t product “review” content; it’s a step-by-step guide with timestamps and links in the description.
The author repeatedly instructs viewers to:
- Pause and apply the code changes themselves
- Paste embed code correctly in Google Sites
- Adjust embed sizing—especially important for collapsible components

Main speakers / sources

Speaker: The video presenter/host (unnamed in the subtitles).
Sources referenced/used:
- W3Schools (Bootstrap 3 tutorials/examples and “Try it yourself”)
- Bootstrap 3 (HTML/CSS/JavaScript framework)
- Google Fonts (fonts.google.com)
- Pixels (mentioned as an image source for demo images)