University of Leeds Design System v1.0.13

Iframe

Guidance

The @uol-iframe allows the loading of another HTML page within the component. This will generally be used for embedded videos and maps.

Each iframe component requires a title and src to be passed via config. The title needs to describe what the embed is showing.

The iframe will display differently depending on the outer container, refer to scss.

Example of implementing a map

Below shows an example of how Google Maps can be used with the @uol-iframe component, by passing the following values:

  • “title”
  • “src”
{
  "iframe": {
    "title": "The Parkinson building on a map",
    "src": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk"
  }
}
<iframe class="uol-iframe" src="{{ iframe.src }}" title="{{ iframe.title }}"></iframe>
 
<iframe class="uol-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk" title="The Parkinson building on a map"></iframe>
  • Content: 
    .uol-iframe {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #51504C;
    aspect-ratio: 2 / 1;

}

// Diffrent layout for when iframe present in search results
.uol-search-results {
    .uol-iframe {
        aspect-ratio: 1 / 1;
        margin: $spacing-2 $spacing-2 9px; // combatting results item margin

        @include media('<uol-media-m') {
            margin-bottom: 25px; // combatting results item margin
        }
        // max-width: 986px;
        border: 1px solid #C9C8C5;

        @include media(">=uol-media-s", "<uol-media-l") {
            height: 382px;
            width: 100%;
            // aspect-ratio: 1.9 / 1;
        }

        // hacky fix - padding on map between 300px-360px
        @media(max-width: 360px) {
            width: 95%;
        }

        @include media(">=uol-media-m") {
            height: 382px;
            margin-bottom: $spacing-5;
        }

        @include media(">=uol-media-l") {
            margin: $spacing-1 $spacing-3 $spacing-7;
            // margin-right: calc(100% - 986px)
        }

    }
}

// Different layout for when iframe present in article pattern search result variant
.uol-article {
    .uol-iframe + .uol-search-result__filters  {
        margin-bottom: $spacing-6 !important;
        @include media(">=uol-media-m") {
            margin-bottom: $spacing-7 !important;
        }
    }
}
// spacings only on form-map article variant
.uol-article--form-map {
    .uol-iframe {
        margin-bottom: $spacing-6 !important;

        @include media(">=uol-media-m") {
            margin-bottom: $spacing-7 !important;
        }
    }
}

// Only for youtube iframe embeds, for example in article pattern config.
// Folling removal of obsolete 'frameborder' property.
.fluid-width-video-wrapper iframe {
    border: none;
}
  • URL: /components/raw/uol-iframe/_iframe.scss
  • Filesystem Path: src/library/02-components/iframe/_iframe.scss
  • Size: 1.8 KB 
{
  "iframe": {
    "title": "The Parkinson building on a map",
    "src": "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk"
  }
}