<div class="videos-container" id="app">
<div class="video-player">
<video-frame :source="current"></video-frame>
</div>
<div class="video-choices">
<video-thumbnails :movies="movies" v-on:choose-movie="handleChangeCurrent"></video-thumbnails>
</div>
</div>
body {
background: #1e3c72;
background: linear-gradient(to right, #1e3c72, #2a5298);
padding: 30px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.videos-container {
background: #333;
padding: 10px;
box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.25);
color: #FFF;
}
.video-player {
min-height: 300px;
width: 100%;
background: #000;
margin-bottom: 10px;
}
.video-choices {
display: flex;
:not(:last-child) {
margin-right: 5px;
}
img {
height: 100px;
}
}
.poster{
float: left;
}
.thumbnails{
display: flex;
justify-content: left;
}
View Compiled
// the movies you can use from this API
const videoTag = {
template: `
<iframe
allowFullScreen
frameborder="0"
height="376" :src="source.trailer"
style="width: 100%; min-width: 750px"
/>
`,
props: ['source']
};
const thumbnail = {
template: `
<div class="thumbnails">
<div v-for="movie in movies">
<div class="poster" @click="changeCurrent(movie)">
<img :src="movie.poster" height="200"alt="">
</div>
</div>
</div>
`,
props: ["movies"],
methods: {
changeCurrent(movie) {
this.$emit('choose-movie', movie)
}
}
};
var app = new Vue({
el: "#app",
components: {
"video-frame": videoTag,
"video-thumbnails": thumbnail
},
data() {
return {
api: "https://scotch-mvplayer-api.herokuapp.com/api/v1",
movies: [],
current: null
};
},
created() {
axios.get(this.api).then(res => {
this.movies = res.data;
this.current = this.movies[0]
});
},
methods: {
handleChangeCurrent(movie) {
this.current = movie
}
}
});
// HAVE FUN! USE WHATEVER TOOL YOU WANT!
This Pen doesn't use any external CSS resources.