Multiple galleries on page and youtube

[focussing]

I need more than one gallery entries on my page, one with a youtube video, and one with several images on another (bootstrap) row. So I used this:

<div class="col-md-6">
  <gallery :images="movie1" :index="index" @close="index = null"></gallery>
  <img class="img-fluid" src="/images/thumbnail_elementary.png" alt="movie1" @click="index=0" />
</div>

And further down on the page:

<div class="col-md-6">
  <gallery :images="images" :index="index" @close="index = null"></gallery>
  <img class="img-fluid" src="/images/thumbnail_elementary.png" alt="images" @click="index=0" />
</div>

The js pieces:

images: [
    'images/si.jpg',
    'images/res1.jpg',
    'images/res2.jpg',
    'images/halite.jpg',
    'images/calcite.jpg',
    'images/TiO2.jpg',
    'images/TiO2_Rut_Ana_Main_Peaks.jpg'
],
movie1: [{
    title: 'our movie',
    href: 'https://www.youtube.com/watch?v=VIDEO_ID',
    type: 'text/html',
    youtube: 'VIDEO_ID',
}],

What happens is the following: 1) first time after page reload it works more or less (see #2 below), next clicks a Cross-Origin Read Blocking error occurs, the second needs to be commented out. 2) the youtube movie is not played immediately, and when finally, not in a lightbox.

• First a small "play" symbol occurs
• When clicked it opens a full screen youtube screen opens, showing a thumbnail
• The movie plays only when clicking the thumbnail, but not played in the lightbox but in a youtube environment.

What am i doing wrong? Please help....

[focussing]

demo: http://test.xplorex.eu

this video

[focussing]

Updated the test site at http://test.xplorex.eu

The youtube movie is not played immediately, and when finally, not in a lightbox.

• After first click a small "play" symbol occurs
• When clicked again it opens a full screen youtube screen opens, showing a thumbnail
• The movie plays only when clicking the thumbnail, but not played in the lightbox but in a youtube environment. I cannot close via 'esc' or so, I have to reload the page to get out.

What am I doing wrong?

This is the code now:

<template>
<div id="app">
    <section id="whatwedo">
        <div class="container">
            <div class="row">
                <p>
                    left video should be loaded in lightbox, right video loads later but plays directly
                </p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <img class="img-fluid" src="/images/thumbnail_elementary.png" alt="movie1" @click="playMovie(0)" />

                    <!-- <img  />
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/1X1SFrOwY4o"></iframe>
                    </div> -->
                    <br/>
                </div>
                <div class="col-md-6">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/AauFlzmMniA"></iframe>
                    </div>
                    <br/>
                </div>
            </div>
        </div>
    </section>

    <section id="applications">
        <div class="container">
            <div class="row">
                <p>
                    images load fine in lightbox, however the prev and next arrows are not displayed
                </p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <img class="img-fluid" :src="measurements[0]" alt="silicon" @click="showGallery(0)" />
                </div>
                <div class="col-md-3">
                    <img class="img-fluid" :src="measurements[6]" @click="showGallery(6)" />
                </div>
                <div class="col-md-3">
                    <img class="img-fluid" :src="measurements[3]" alt="halite" @click="showGallery(3)" />
                </div>
                <div class="col-md-3">
                    <img class="img-fluid" :src="measurements[5]" @click="showGallery(5)" />
                </div>
            </div>

        </div>
    </section>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
</div>
</template>
<script>
import VueGallery from 'vue-gallery'

export default {
    data: () => ({
        measurements: [
            'images/si.jpg',
            'images/res1.jpg',
            'images/res2.jpg',
            'images/halite.jpg',
            'images/calcite.jpg',
            'images/TiO2.jpg',
            'images/TiO2_Rut_Ana_Main_Peaks.jpg'
        ],
        images: [],
        movie1: [{
            title: 'ons 1e filmpje',
            href: 'http://www.youtube.com/watch?v=1X1SFrOwY4o',
            type: 'text/html',
            youtube: '1X1SFrOwY4o',
            poster: 'http://img.youtube.com/vi/1X1SFrOwY4o/0.jpg',
            fullScreen: false,
            youTubeClickToPlay: false,
        }],
        movie2: [{
            title: 'ons 2e filmpje',
            href: 'http://www.youtube.com/watch?v=AauFlzmMniA',
            type: 'text/html',
            youtube: '1X1SFrOwY4o',
            poster: 'http://img.youtube.com/vi/AauFlzmMniA/0.jpg',
            fullScreen: false,
            youTubeClickToPlay: false,
        }],
        index: null,
    }),

    components: {
        'gallery': VueGallery
    },

    created() {
        console.clear();
        this.images = this.movie2;
    },

    methods: {
        playMovie(movieNr) {
            this.images = this.movie1;
            this.index = 0;
        },

        showGallery(index) {
            this.images = this.measurements;
            this.index = 0;
        },
    }
}
</script>

[RobinCK]

Hi @focussing

My example for your question https://jsfiddle.net/Robin_ck/93n1u4ck/

• Multiple galleries on page
• Youtube autoplay

Other youtube player options: https://developers.google.com/youtube/player_parameters

[focussing]

Hello @RobinCK , thank you for your example. I have still troubles with youtube autoplay, your example exactly resembles what I mean. You have to click several times to get it to play, and when it plays it is hard to get out via ESC.