Styleguide

Video 

<div class="video">
    <h3 class="title-small"></h3>
    <div class="video-preview">
        <img src="https://placehold.it/320x180">
        <i class="fal fa-play-circle"></i>
    </div>

    <div class="video-overlay">
        <div class="video-dimmer"></div>
        <button class="close-video-btn"><i class="fal fa-times"></i></button>
        <div class="video-stage">
            <div class="youtube-iframe-placeholder" data-src="https://www.youtube-nocookie.com/embed/R7uVdWENCMA"></div>
        </div>
    </div>

</div>
 
<div class="video">
  <h3 class="title-small">{{ title }}</h3>
  <div class="video-preview">
    <img src="{{ video_poster_src }}">
    <i class="fal fa-play-circle"></i>
  </div>

  <div class="video-overlay">
    <div class="video-dimmer"></div>
    <button class="close-video-btn"><i class="fal fa-times"></i></button>
    <div class="video-stage">
      <div class="youtube-iframe-placeholder" data-src="{{ video_url }}"></div>
    </div>
  </div>

</div>
 
{
  "title": "",
  "video_poster_src": "https://placehold.it/320x180",
  "video_url": "https://www.youtube-nocookie.com/embed/R7uVdWENCMA"
}
  • Content: 
    import $ from "jquery";

$('.video .video-preview').on('click', function() {
  var $iframePlaceholder = $(this).parent().find('.youtube-iframe-placeholder');

  if ($iframePlaceholder.length) {
    var $iframe = $('<iframe class="youtube-iframe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
    $iframe.attr('src', $iframePlaceholder.attr('data-src'));
    $iframePlaceholder.replaceWith($iframe);
  }

  $(this).parent().find('.video-overlay').addClass('is-open');
});

$('.video-dimmer').click(function() {
    $(this).parent().removeClass('is-open');
    $(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
$('.close-video-btn').click(function() {
    $(this).parent().removeClass('is-open');
    $(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
  • URL: /components/raw/video/video.js
  • Filesystem Path: components/02-components/video/video.js
  • Size: 952 Bytes
  • Content: 
    .video {
	margin-top: 3rem;
	margin-bottom: 6rem;

	.title-small {
		font-style: normal;

		&:empty {
			display: none;
		}
	}
	.video-preview {
		position: relative;
		cursor: pointer;
		img {
			width: 100%;
		}
		svg {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 8rem;
			height: 8rem;
			margin-left: -4rem;
			margin-top: -4rem;
			color: #fff;
			opacity: 0.8;
			transition: all 0.2s ease-in-out;
		}

		&:hover,
		&:focus {
			svg {
				transform: scale(0.9);
				opacity: 1;
			}
		}
	}

	.close-video-btn {
		background: transparent;
		border: none;
		position: absolute;
		top: 2rem;
		right: 2rem;
		font-size: 4rem;
		outline: none;
		opacity: 0.8;
		&:hover {
			opacity: 1;
		}
		svg {
			color: #fff;
		}
	}

	.video-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		pointer-events: none;
		z-index: -10;
		transition: all 0.2s ease-in-out;

		&.is-open {
			opacity: 1;
			pointer-events: all;
			z-index: 2000;
		}

		.video-dimmer {
			position: absolute;
			height: 100%;
			width: 100%;
			background: rgba(#000, 0.4);
			cursor: pointer;
		}

		.video-stage {
			//width: 80vw;
			position: relative;
			z-index: 5;
			max-width: 90vw;
			max-height: 80vh;

			iframe {
				width: 800px;
				height: 450px;
				max-width: 100%;
				max-height: 100%;
			}
		}

		&.is-open {
		}
	}
}

.sidebar .video {
	margin-top: 0;
}
  • URL: /components/raw/video/video.scss
  • Filesystem Path: components/02-components/video/video.scss
  • Size: 1.5 KB

There are no notes for this item.