Video Box

About

Angular directive for a Youtube or locally hosted video with a picture element overlay.

TODO

This will need some proper testing with an actual model.
Add working example.
Example Styling.

<div class="videoBox"
     data-video-box=""
     data-model="model"
     data-config="config"
>
    <!-- fallback for nojs - link directly to the video -->
    <a href="./assets/e78.mp4"></a>
</div>

// Example model - most likely to actually come form @Model
var model = {
    VideoSrc: './assets/kittens.mp4',
    VideoTitle: 'Frolicking Kittens',
    VideoRunTime: '01:12:03',
    ImageSrc: './assets/kittens.jpg',
    ImageSrcWebP: './assets/kittens.webp',
    ImageAlt: 'Frolicking Kittens',
    BoxTitle: 'Watch a lovely video of kittens',
    BoxText: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
};

// Pass through from controller or inline
// Defaults
var config = {
    Width: 720,
    Height: 405,
    Frameborder: 0,
    Allow: 'autoplay; encrypted-media',
    Allowfullscreen: true,
    ExternalClass: 'videoBox--modifier'
};