<!-- Video Embed -->
<section class="media-embed">
    <figure class="media-embed-fig">
        <a class="media-embed-a" data-attr-iframe-max-width="100%" href="https://www.youtube.com/watch?v=Tj2dbHofw4I">
            <img class="media-embed-img" src="../../images/media-embed-demo/Light-and-sound-engineering-Youtube-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Entertainment Engineering at the University of Derby" />
                            <i class="uod-icons uod-icons-right-navigation"></i>
                    </a>
    </figure>
</section>

<!-- Vimeo Embed -->
<section class="media-embed">
    <figure class="media-embed-fig">
        <a class="media-embed-a" data-attr-iframe-max-width="100%" href="https://vimeo.com/226163750">
            <img class="media-embed-img" src="../../images/media-embed-demo/us-video-image.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="University of Derby Union of Students" />
                            <i class="uod-icons uod-icons-right-navigation"></i>
                    </a>
    </figure>
</section>

<!-- 360 Embed -->
<section class="media-embed">
    <figure class="media-embed-fig">
        <a class="media-embed-a" data-iframe="true" data-attr-iframe-max-width="100%" href="https://blog.derby.ac.uk/wp-content/themes/derby-uni-blog/virtual-campus/content/tours/index.html?360=43">
            <img class="media-embed-img" src="../../images/media-embed-demo/7N0A0904.jpg" srcset="../../images/media-embed-demo/7N0A0904,w_320.jpg 320w, ../../images/media-embed-demo/7N0A0904,w_400.jpg 400w, ../../images/media-embed-demo/7N0A0904,w_600.jpg 600w, ../../images/media-embed-demo/7N0A0904.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="Markeaton Street - The Street" />
                            <i class="uod-icons uod-icons-360-view"></i>
                    </a>
    </figure>
</section>

<section class="media-embed">
    <figure class="media-embed-fig">
        <a class="media-embed-a"{% if type == '360' %} data-iframe="true"{% endif %} data-attr-iframe-max-width="{{ iframeMaxWidth }}" href="{{ iframe | path }}">
            <img class="media-embed-img" src="{{ path | path }}"{% if srcset %} srcset="{% for src in srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ path | path }}"{% endif %} data-sizes="(min-width: 40em) 80vw, 100vw" alt="{{ alt }}" />
            {% if type == '360' %}
                <i class="uod-icons uod-icons-360-view"></i>
            {% elseif type == 'video' %}
                <i class="uod-icons uod-icons-right-navigation"></i>
            {% endif %}
        </a>
    </figure>
</section>
/* Video Embed */
{
  "iframe": "https://www.youtube.com/watch?v=Tj2dbHofw4I",
  "path": "/images/media-embed-demo/Light-and-sound-engineering-Youtube-image.jpg",
  "alt": "Entertainment Engineering at the University of Derby",
  "type": "video",
  "iframeMaxWidth": "100%"
}

/* Vimeo Embed */
{
  "iframe": "https://vimeo.com/226163750",
  "path": "/images/media-embed-demo/us-video-image.jpg",
  "alt": "University of Derby Union of Students",
  "type": "video",
  "iframeMaxWidth": "100%"
}

/* 360 Embed */
{
  "iframe": "https://blog.derby.ac.uk/wp-content/themes/derby-uni-blog/virtual-campus/content/tours/index.html?360=43",
  "path": "/images/media-embed-demo/7N0A0904.jpg",
  "alt": "Markeaton Street - The Street",
  "type": "360",
  "iframeMaxWidth": "100%",
  "srcset": [
    {
      "path": "/images/media-embed-demo/7N0A0904,w_320.jpg",
      "width": 320
    },
    {
      "path": "/images/media-embed-demo/7N0A0904,w_400.jpg",
      "width": 400
    },
    {
      "path": "/images/media-embed-demo/7N0A0904,w_600.jpg",
      "width": 600
    }
  ]
}

  • Content:
    import $ from 'jquery'
    import lightgallery from 'lightgallery'
    import '../../../node_modules/lg-video/dist/lg-video.min.js'
    
    $('.media-embed').each(function(){
    
        $(this).lightGallery({
            selector: '.media-embed-a',
            download: false,
            youtubePlayerParams: {
                modestbranding: 1,
                showinfo: 0,
                rel: 0,
                controls: 0
            },
            getCaptionFromTitleOrAlt: false,
            iframeMaxWidth: $('.media-embed-a', $(this)).attr('data-attr-iframe-max-width')
        });
    });
  • URL: /components/raw/media-embed/media-embed.js
  • Filesystem Path: components/components/media-embed/media-embed.js
  • Size: 531 Bytes
  • Content:
    .media-embed {
        position: relative;
    
        &-fig {
            margin: 0;
        }
    
        &-img {
            display: block;
            margin: 0 auto; // if an image is smaller than the width, centre-align it.
            max-width: 100%;
        }
    
        &-a {
            display: block;
            @include disable-underlines;
            cursor: pointer;
    
            .uod-icons:not(.uod-icons-right-navigation) {
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: $white;
                font-size: responsive 50px 80px;
                font-range: $mobile-portrait $desktop;
                z-index: 1;
                text-shadow: rgba($black,0.5) 2px 2px 10px;
    
                @include for-tablet-landscape-up {
                    bottom: 30px;
                    right: 30px;
                }
    
                &.uod-icons-external-link {
                    font-size: responsive 25px 35px;
                    font-range: 320px 1200px;
                }
            }
    
            .uod-icons-right-navigation {
                font-size: responsive 25px 35px;
                font-range: $mobile-portrait $desktop;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 56px;
                height: 56px;
                line-height: 56px;
                margin: -28px 0 0 -28px;
                text-align: center;
                border: 3px solid $white;
                color: $white;
                border-radius: 100%;
                background: rgba($black, 0.6);
                // transform: perspective(1px) translateZ(0);
                overflow: hidden;
    
                @include for-tablet-portrait-up {
                    width: 66px;
                    height: 66px;
                    line-height: 66px;
                    margin: -33px 0 0 -33px;
                }
    
                @include for-tablet-landscape-up {
                    width: 76px;
                    height: 76px;
                    line-height: 76px;
                    margin: -38px 0 0 -38px;
                }
    
                &::before {
                    margin: -2px 0 0 6px;
                    position: relative;
                    display: block;
                }
    
                &::after {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: $black;
                    transform: scaleX(0);
                    transform-origin: 0 50%;
                    transition: transform 0.3s $default-animation-curve;
                    overflow: hidden;
                }
            }
    
            &:hover{
    
                .uod-icons-right-navigation::after {
                    -webkit-transform: scaleX(1);
                    transform: scaleX(1);
                }
            }
        }
    
        &-caption {
            @extend .full-width-image-caption;
    
            @include for-phone-only {
                padding-right: 0;
                padding-left: 0;
            }
    
            &-background {
                @extend .full-width-image-caption-background;
            }
        }
    }
    
    /* 
        outside text block...  
        give same behaviour as a text block
    */
    .center-align > .media-embed {
        // mixin that sets a consistent columns width
        @include uod-text-column;
        
        // start: set default intra-component spacing (units are responsive and based on em values)
        @include margin-medium;
        
        @include for-tablet-portrait-up  {
            @include margin-large;
        }
        // end: set default intra-component spacing (units are responsive and based on em values)
    }
    
    /* When an image embed follows a text block adjust the margins... */
    .center-align > .text-block + .media-embed,
    .center-align > .media-embed + .text-block {
        @include margin-medium-offset;
    
        @include for-tablet-portrait-up {
            @include margin-large-offset;
        }
    }
    
    /* When an image embed follows an image embed... */
    .center-align > .media-embed + .media-embed {
        @include margin-medium-offset;
    }
    
    
  • URL: /components/raw/media-embed/media-embed.scss
  • Filesystem Path: components/components/media-embed/media-embed.scss
  • Size: 3.9 KB

Media Embed

The media embed component sits alongside text blocks. It can be used to embed iframed content from multiple sources; Youtube, Vimeo, URLs e.g. 360 videos.

When clicked on the iframe content opens within a modal, as with the behaviour of the media gallery component.

Responsive images are supported through use of the srcset property, which combine an image path and a target screen width at which the image should be displayed.

Key Features

  • Embed iframe content from multiple sources
  • Custom thumbnail
  • iframed content loaded when modal opens
  • Optional srcset support

Properties

  • iframe [required, string]
  • type [required, string “video” or “360”]
  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]