<template>
  <div>
    <iframe :src="this.src" @load="loaded = true" frameborder="0" ref='iframe' />
    <button @click="requestFullscreen" v-if="loaded">Afficher en plein écran</button>
  </div>
</template>

<script>
export default {
    name: "ExternalIframe",
    props: {
        src: {
            required: true
        }
    },
    data(){
        return {
            loaded: false,
        }
    },
    methods: {
        requestFullscreen(){
            this.$refs['iframe'].requestFullscreen();
        }
    }
}
</script>

<style scoped>
    iframe{
        width: 100%;
        height: 50vh;
    }

    button{
        display: block;
        margin: 20px auto;
        font-size: 1.1em;
        border: none;
        border-radius: 5px;
        padding: 5px;
        background-color: #d5daea;
        cursor: pointer;
        user-select: none;
    }
</style>
<template>
  <div>
    <iframe :src="this.src" frameborder="0" ref='iframe' />
    <button @click="requestFullscreen">Afficher en plein écran</button>
  </div>
</template>

<script>
export default {
    name: "ExternalIframe",
    props: {
        src: {
            required: true
        }
    },
    methods: {
        requestFullscreen(){
            this.$refs['iframe'].requestFullscreen();
        }
    }
}
</script>

<style scoped>
    iframe{
        width: 100%;
        height: 50vh;
    }

    button{
        display: block;
        margin: 20px auto;
        font-size: 1.1em;
        border: none;
        border-radius: 5px;
        padding: 5px;
        background-color: #d5daea;
        cursor: pointer;
        user-select: none;
    }
</style>
Revert du test isLoaded sur l'iframe
Revert du test isLoaded sur l'iframe
