Iframe 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/iframe.css?cb=">

<div class="iframe">
    <h2 class="iframe__title">Kapok</h2>
    <div class="iframe__frame-container">
        <iframe loading="lazy" src="https://vuwstudio.com/vr/KAPOK_360/"></iframe>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/iframe.css?cb={{cacheBuster}}">
{{/if}}

<div class="iframe">
    <h2 class="iframe__title">{{title}}</h2>
    <div class="iframe__frame-container">
	    <iframe loading="lazy" src="{{url}}"></iframe>
    </div>
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "title": "Kapok",
  "url": "https://vuwstudio.com/vr/KAPOK_360/"
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.iframe {
    &__title {
        @extend %heading02;
    }

    &__frame-container {
        height: 0;
        padding-bottom: 56.25%; // 16:9
        position: relative;
    }

    iframe {
        height: 100%;
        left: 0;
        max-width: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
  • URL: /components/raw/iframe/iframe.scss
  • Filesystem Path: source/patterns/03-components/media/iframe/iframe.scss
  • Size: 413 Bytes

No notes defined.