VUE JS WP VIDEO PRAISE LOOP

vuejs-video-praise-loop.php

<!--==========================================
=            VIDEO PRAISE SECTION            =
===========================================-->
<section id="video-praise-loop" class="container">

	<main class="container">
		
		<div class="flex-container">

			<article class="text-box flex-item text-center" v-for="post in posts">

				<figure class="video-box">

				    <div class="video">

				        <div class="embed-responsive embed-responsive-16by9" v-if="post.acf.choose_video_type[0].acf_fc_layout === wistia">

				        	<div v-html="post.acf.choose_video_type[0].wistia_video_code "></div>  		

							<!-- // <script src="https://fast.wistia.com/embed/medias/qbk5zsvwii.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:50.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_qbk5zsvwii videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div> -->

				        </div>

				        <div class="embed-responsive embed-responsive-16by9" v-else-if="post.acf.choose_video_type[0].acf_fc_layout === youtube">
								
				            <iframe class="embed-responsive-item" :src="url_1+post.acf.choose_video_type[0].youtube_video_id_only+url_2"></iframe>

				        </div>
					
				    </div>

				</figure>	

				<h4 class="subheading">{{ post.acf.client_description }}</h4>
				<h2 class="heading">{{ post.title.rendered }}</h2>
				<p class="praise-text">
					{{ post.acf.client_content }}
				</p>

			</article>
			

		</div>

	</main>	

</section> <!-- End Container -->	



new Vue ({
  el: '#video-praise-loop',
  data(){

  	return {

    	ajax:       '<?php echo get_site_url(); ?>',
    	posts:      '',
    	youtube: 	'youtube_video',
    	wistia: 	'wistia_video',
    	url_1: 		'https://www.youtube.com/embed/',
    	url_2: 		'?wmode=opaque&autoplay=0&loop=1&controls=1&showinfo=0&rel=0'
	}

  },  
  created: function() {

    this.getNews();

  },
  methods: {
     getNews: function() {

        var app = this;

         axios.get( app.ajax + '/wp-json/wp/v2/video-testimonials-api?per_page=100')
          .then(function(response) {
            app.posts = response.data;

            return app.posts;
        })
         .catch(function(error){
           console.log(error);
         });

     },
  }

});