<!-- YouTube 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 media-play-button"></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 media-play-button"></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-->
<img src="https://www.derby.ac.uk/media/global/images/360-view.svg" class="uod-icons uod-icons-360-image" alt="">
</a>
</figure>
</section>
<!-- YouTube with subtitles uploaded -->
<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=OxFtfo9n4ys">
<img class="media-embed-img" src="https://img.youtube.com/vi/OxFtfo9n4ys/maxresdefault.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="" />
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</a>
</figure>
</section>
<!-- Video with transcript -->
<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=OxFtfo9n4ys" data-sub-html="<p class='view-transcript'><a href='https://www.w3.org/WAI/highlights/200606wcag2interview.html'>View Applicant Days at the University of Derby transcript</a></p>">
<img class="media-embed-img" src="https://img.youtube.com/vi/OxFtfo9n4ys/maxresdefault.jpg" data-sizes="(min-width: 40em) 80vw, 100vw" alt="" />
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</a>
<p class="media-embed-transcript-p small"><a href='https://www.w3.org/WAI/highlights/200606wcag2interview.html'>View Applicant Days at the University of Derby transcript</a></p>
</figure>
</section>
<!-- With title and intro text -->
<section class="text-block" role="region" aria-labelledby="pathways-to-nature-connection">
<h2 id="pathways-to-nature-connection">Pathways to nature connection</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis provident aut iusto omnis, fuga quae explicabo a nam. Veniam quam similique cumque iure eos iste modi omnis facilis cum dignissimos?
</section>
<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 media-play-button"></i>
</a>
</figure>
</section>
{% if title %}
{% embed '@text-block' with { title: title } %}
{% block content %}
{{ content }}
{% endblock %}
{% endembed %}
{% endif %}
<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 }}"
{% if transcript %}
data-sub-html="<p class='view-transcript'><a href='{{ transcript }}'>View {{ mediaName }} transcript</a></p>"
{% endif %}
>
<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-->
<img src="https://www.derby.ac.uk/media/global/images/360-view.svg" class="uod-icons uod-icons-360-image" alt="">
{% elseif type == 'video' %}
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
{% endif %}
</a>
{% if transcript %}
<p class="media-embed-transcript-p small"><a href='{{ transcript }}'>View {{ mediaName }} transcript</a></p>
{% endif %}
</figure>
</section>
/* YouTube 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
}
]
}
/* YouTube with subtitles uploaded */
{
"iframe": "https://www.youtube.com/watch?v=OxFtfo9n4ys",
"path": "https://img.youtube.com/vi/OxFtfo9n4ys/maxresdefault.jpg",
"alt": null,
"type": "video",
"iframeMaxWidth": "100%"
}
/* Video with transcript */
{
"iframe": "https://www.youtube.com/watch?v=OxFtfo9n4ys",
"path": "https://img.youtube.com/vi/OxFtfo9n4ys/maxresdefault.jpg",
"alt": null,
"type": "video",
"iframeMaxWidth": "100%",
"transcript": "https://www.w3.org/WAI/highlights/200606wcag2interview.html",
"mediaName": "Applicant Days at the University of Derby"
}
/* With title and intro text */
{
"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%",
"title": "Pathways to nature connection",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis provident aut iusto omnis, fuga quae explicabo a nam. Veniam quam similique cumque iure eos iste modi omnis facilis cum dignissimos?"
}
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,
videoMaxWidth: '1080px',
youtubePlayerParams: {
modestbranding: 1,
showinfo: 1,
rel: 0,
controls: 1
},
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;
}
}
&: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;
}
}
&-transcript-p {
text-align: right;
margin-top: .5em;
}
}
// FIX FOR THE 360 ICON
.uod-icons-360-image {
@include responsive('height', 40px, 80px, 400px, 800px);
@include responsive('width', 40px, 80px, 400px, 800px);
}
// Right nav icon styled as play button, also used by media gallery
.uod-icons-right-navigation.media-play-button {
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;
}
}
/*
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:not(.text-block-course-page-heading) + .media-embed,
.center-align > .media-embed + .text-block:not(.text-block-course-page-heading) {
@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.
A media embed can have a transcript URL supplied. This will be linked to below the item and in the modal that opens the media. The media name will be used in the link text for the transcript to provide the user context.
To provide context to the user the title and content properties can be used.