MIUN - Design Library

VideoBlock 

<div class="enablevue">
    <div class="row mb-sm">
        <div class="col-12">
            <h2 class="heading-level-2">
                En stor rubrik
            </h2>
        </div>
    </div>
    <videoblock image-url="https://picsum.photos/600/400" image-caption="" title="Videoblock" video-tag="&lt;iframe title&#x3D;&quot;YouTube video player&quot; width&#x3D;&quot;640&quot; height&#x3D;&quot;360&quot; src&#x3D;&quot;https://www.youtube.com/embed/rxZouWmE8Rg&quot; frameborder&#x3D;&quot;0&quot; allowfullscreen&#x3D;&quot;&quot;&gt;&lt;/iframe&gt;"
        video-caption="1:42 min | Vimeo.com" text="En beskrivning">
    </videoblock>
</div>
 
<div class="enablevue">
    {{#if heading}}
    <div class="row mb-sm">
        <div class="col-12">
            <h2 class="heading-level-2">
                {{heading}}
            </h2>
        </div>
    </div>
    {{/if}}
    <videoblock image-url="{{imageUrl}}"  image-caption="{{imageCaption}}" title="{{title}}" video-tag="{{videoTag}}" video-caption="{{videoCaption}}" text="{{text}}">
    </videoblock>
</div>
 
{
  "imageUrl": "https://picsum.photos/600/400",
  "heading": "En stor rubrik",
  "title": "Videoblock",
  "text": "En beskrivning",
  "videoTag": "<iframe title=\"YouTube video player\" width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/rxZouWmE8Rg\" frameborder=\"0\" allowfullscreen=\"\"></iframe>",
  "epiDivClass": "col-md-6",
  "videoUUID": "e7cfae8d-f40d-4f31-a0b4-ad3e41fee01a",
  "videoCaption": "1:42 min | Vimeo.com"
}
  • Content: 
    Vue.component("videoblock", {
    props: ["videoUUID", "imageUrl","imageCaption", "title","videoTag", "videoCaption", "text"],
    data() {
      return {
        showModal: false
      };
    },
    template: `
    <div>
        <div role="button" v-on:click="showModal = !showModal">
            <div class="video-block">
                <div class="video-block-item">
                    <figure v-bind:style="{ backgroundImage: 'url(' + imageUrl + ')' }" >
                        <img class="sr-only" v-bind:src="imageUrl" alt="alt text">
                        <figcaption v-if="imageCaption">{{ imageCaption }}</figcaption>
                            <span class="video-caption" v-if="videoCaption">
                                <p>{{videoCaption}}</p>
                            </span>
                    </figure>
                    <h3 v-if="title" class="heading-level-3">{{ title }}</h3>
                    <p v-if="text">{{ text }}</p>
                </div>
            </div>
        </div>
        <div class="modal fade video-modal show" v-if="showModal" style="display: block; padding-right: 17px;" tabindex="-1" role="dialog" v-bind:aria-modal="showModal" v-bind:aria-hidden="!showModal">
            <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <a href="javascript:void(0);" class="button-close-video" v-on:click="showModal=false">&times;</a>
                    </div>
                    <div class="video-wrapper" v-html="videoTag" style="padding-top: 56.25%;">
                    </div>
                </div>
            </div>
        </div>
    </div>`
  });
  • URL: /components/raw/videoblock/VideoBlock.js
  • Filesystem Path: src\components\02-block_components\VideoBlock\VideoBlock.js
  • Size: 1.8 KB
  • Content: 
    .video-block {
    .video-caption {
        position: absolute;
        background: rgba(64, 64, 64, 0.9);
        padding: 0px .7em;
        bottom: 10px;
        font-size: 16px;
        border-radius: 60px;
        line-height: inherit;
        color: white;
        right: 10px;
        p{
            margin-bottom: 0px;
            color: white;
            font-size: .7em;
        }
      }
    figure {
        position: relative;
        margin-bottom: 20px;
        background-size: cover;
        background-position: center;
        height: 200px;

        figcaption {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            padding: 2px $xs-space;
            background-color: $orange;
            color: #fff;
            font-family: "Lato Bold";
        }

        &:after {
            position: absolute;
            content: '\e039';
            font-family: 'Material Icons';
            font-size: 72px;
            text-align: center;
            color: #fff;
            background-color: rgba($color: #000000, $alpha: 0.1);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    h3 {

        a {
            font-size: inherit;
            color: inherit;
        }
    }

    .video-block-item {
        padding: 15px;
        margin-bottom: $xs-space;
        transition: box-shadow 0.3s ease;
        &:hover {
            box-shadow: $box-shadow;
            cursor: pointer;
        }
    }

    &:hover {
        figure:after {
            color: white;
            text-decoration: none !important;
            background-color: rgba($color: #000000, $alpha: .1);
        }

        .heading-level-3 {
            text-decoration: none !important;
        }
    }
}

a[role="button"]:hover {
    
        text-decoration: none;
}

.video-modal {
    .modal-dialog {
        position: fixed;
        top: 50%;
        transform: translateY(-50%) !important;
        right: 0;
        left: 0;
        width: 90%;
        max-width: 68.75em;
        margin: auto;
        max-height: 90%;
        overflow: hidden !important;

        .modal-content {
            background-color: transparent;
            border: none;
        }

        .modal-header {
            padding: 0;
            border: none;
        }

        .video-wrapper {
            width: 100%;
            position: relative;
            padding: 0;

            iframe, object, embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}

// .video-modal {
//     .modal-dialog {

//         .modal-content {
//             background: transparent;
//             border: 0;
//         }

//         .modal-body {
//             width: 100%;
//             min-height: 360px;
//             max-height: 50%;
//             height: 50%;
//             padding: 0;

//             iframe {
//                 position: absolute;
//                 top: 0;
//                 left: 0;
//                 width: 100%;
//                 height: 100%;
//             }
//         }
//     }
// } 

@element .video-block and (min-width: 400px) {
    :self .video-block-item figure {
        height: 250px;
    }
}

@element .video-block and (min-width: 600px) {
    :self .video-block-item figure {
        height: 300px;
    }
}

@element .video-block and (min-width: 900px) {
    :self .video-block-item figure {
        height: 600px;
    }
}
  • URL: /components/raw/videoblock/VideoBlock.scss
  • Filesystem Path: src\components\02-block_components\VideoBlock\VideoBlock.scss
  • Size: 3.9 KB
  • Handle: @videoblock
  • Preview:
  • Filesystem Path: src\components\02-block_components\VideoBlock\VideoBlock.hbs

There are no notes for this item.