<template>
    <div class="auto-resizable-iframe">
        <div>
            <iframe :src="`https://www.youtube.com/embed/${widget.text.youtubeVideoId}?&amp;modestbranding=true&amp;showinfo=0&amp;rel=0&amp;wmode=transparent&amp;controls=1`"
                    frameborder="0"
                    allowfullscreen=""></iframe>
        </div>
    </div>

</template>

<script>
    export default {
        name: "youtube_widget",
        props: {
            widget: Object
        },
    }
</script>

<style scoped>
    .auto-resizable-iframe {
        max-width: 100%;
        margin: 0px auto;
    }

    .auto-resizable-iframe > div {
        position: relative;
        padding-bottom: 56.25%;
        height: 0px;
    }

    .auto-resizable-iframe iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
</style>