<!-- 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
}
]
}
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')
});
});
.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;
}
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.