<div class="video-component video-component--large">
<div class="video-component__video">
<iframe title="UIUC FROM THE SKY" width="500" height="375" src="https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="video-component__caption video-component__caption--light">
Caption of video
</div>
</div>
<div class="video-component video-component--{{ componentSpacing }}">
<div class="video-component__video">
{{ component.video.src }}
</div>
<div class="video-component__caption video-component__caption--{{ background }}">
{{ component.video.caption }}
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "video",
"video": {
"src": "<iframe title=\"UIUC FROM THE SKY\" width=\"500\" height=\"375\" src=\"https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"caption": "Caption of video"
}
}
}
.video-component
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__video
overflow hidden
position relative
width 100%
&::after
content ''
display block
padding-top 56.25%
& iframe
height 100%
left 0
position absolute
top 0
width 100%
&__caption
@extend $detail
margin-top 8px
There are no notes for this item.