Clever Component Library

Video Embed 

<div class="video-embed js-video-embed">
    <a href="https://youtu.be/r3-Y31ONZuI" class="video-embed-btn" target="_blank">
        <span class="icon icon-toggle-video">
            <span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.3 56">
                    <path d="M2 56c-.6 0-1.3-.3-1.6-.9-.3-.3-.4-.7-.4-1.1V2C0 .9.9 0 2 0c.4 0 .8.1 1.1.4l37.3 26c.9.6 1.1 1.9.5 2.8-.1.2-.3.4-.5.5l-37.3 26c-.3.2-.7.3-1.1.3zM2 2v52l37.3-26L2 2z" />
                </svg>
            </span>
        </span>
    </a>
    <div class="video-embed-poster">

        <picture class="image">
            <div class="image-inner">
                <span style="padding-bottom: 105.29850746268656%;" class="image-placeholder"></span>
                <img src="/temp/card-image-example.jpg" alt="">
            </div>
            <figcaption class="image-caption">This is an image caption.</figcaption>
        </picture>
    </div>
</div>
 
<div class="video-embed js-video-embed{% if classes is defined and classes|length %} {{ classes|join(' ') }}{% endif %}">
	<a href="{{ url }}" class="video-embed-btn" target="_blank">
		{% include '@icon' with { source: 'icon-toggle-video.svg' } %}
	</a>
	<div class="video-embed-poster">
		{% include '@image' with poster only %}
	</div>
</div>
 
{
  "poster": {
    "url": "/temp/card-image-example.jpg",
    "width": 1340,
    "height": 1411,
    "caption": "This is an image caption."
  },
  "url": "https://youtu.be/r3-Y31ONZuI",
  "classes": []
}

Video Embed

Version 2

  • Video thumbnail (preview poster) is handled in Umbraco
  • Supports both Vimeo and Youtube, video should be added using the URL and not the embed-code provided by Vimeo and Youtube
  • Video option can be implemented on all media elements, but have been specifically requested to be used on the following two components:

1/ Card: Video Embed
2/ Card: Media Gallery