<?php
/**
* @Theme Name	:	wallstreet-Pro
* @file         :	index-service.php
* @package      :	wallstreet-Pro
@author       :	webriti
* @filesource   :	wp-content/themes/wallstreet/index-service.php
*/
?>
<!-- wallstreet Service Section ---->
<div class="service-section">
<div class="container">
	<?php $wallstreet_pro_options=theme_data_setup();
		$current_options = wp_parse_args(  get_option( 'wallstreet_pro_options', array() ), $wallstreet_pro_options ); ?>
	<div class="row">
		<div class="section_heading_title">
		<?php if($current_options['service_title']) { ?>
			<h1><?php echo $current_options['service_title']; ?></h1>
		<div class="pagetitle-separator">
			<div class="pagetitle-separator-border">
				<div class="pagetitle-separator-box"></div>
			</div>
		</div>
		<?php } ?>
		<?php if($current_options['service_description']) { ?>
			<p><?php echo $current_options['service_description']; ?></p>
		<?php } ?>

		</div>
	</div>
	<div class="row">

		<div class="col-md-4 col-sm-6 service-effect">
			<div class="service-box">
<iframe width="100%" allow="autoplay;"id="play2" src="https://www.youtube.com/embed/4ZM6DoiDoD8?enablejsapi=1&mute=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="service-area">
			<h2><a href="#">Product designing</a></h2>
			<p><?php echo 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit dignissim dapib tumst dign eger porta nisl.'; ?></p>
			<div class="service-btn"><a href="#"><?php _e('Read More','wallstreet'); ?></a></div>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 service-effect">
			<div class="service-box">
<iframe width="100%" allow="autoplay;"id="play3" src="https://www.youtube.com/embed/mz_m5U6NDTk?enablejsapi=1&mute=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="service-area">
			<h2><a href="#">WordPress themes</a></h2>
			<p><?php echo 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit dignissim dapib tumst dign eger porta nisl.'; ?></p>
			<div class="service-btn"><a href="#"><?php _e('Read More','wallstreet'); ?></a></div>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 service-effect">
			<div class="service-box">
<iframe width="100%" allow="autoplay;" id="play4" src="https://www.youtube.com/embed/JxRW0qdhdpw?enablejsapi=1&mute=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="service-area">
			<h2><a href="#">Responsive designs</a></h2>
			<p><?php echo 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit dignissim dapib tumst dign eger porta nisl.'; ?></p>
			<div class="service-btn"><a href="#"><?php _e('Read More','wallstreet'); ?></a></div>
			</div>
		</div>
	</div>
</div>
    <script>

     var tag = document.createElement('script');
        tag.id = 'iframe-demo';
        tag.src = 'https://www.youtube.com/iframe_api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player1, player2, player3, player4;
        function onYouTubeIframeAPIReady() {
            player1 = new YT.Player('play1', {
                events: {
                    'onReady': onPlayerReady1,
                    'onStateChange': onPlayerStateChange1
                }
            });
            player2 = new YT.Player('play2', {
                events: {
                    'onReady': onPlayerReady2,
                    'onStateChange': onPlayerStateChange2
                }
            });
            player3 = new YT.Player('play3', {
                events: {
                    'onReady': onPlayerReady3,
                    'onStateChange': onPlayerStateChange3
                }
            });
            player4 = new YT.Player('play4', {
                events: {
                    'onReady': onPlayerReady4,
                    'onStateChange': onPlayerStateChange4
                }
            });
        }
        function onPlayerReady1(event) {
             player1.playVideo();

        }

        function onPlayerStateChange1(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player2.playVideo();
            }
        }

        function onPlayerReady2(event) {

        }

        function onPlayerStateChange2(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player3.playVideo();
            }
        }

        function onPlayerReady3(event) {

        }

        function onPlayerStateChange3(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player4.playVideo();
            }
        }

        function onPlayerReady4(event) {

        }

        function onPlayerStateChange4(event) {
            if (event.data == YT.PlayerState.ENDED) {

            }
        }


            </script>
</div>
<!-- /wallstreet Service Section ---->