basic_modal_youtube.html

[[$HTML_START]]
[[$HEADER]]
[[addAsset? &code=`<style>.breadcrumbs{display:none;}</style>`]]
<link href="[[++assets_common_path]]/css/mt4-se/landing/s-e.css" rel="stylesheet" type="text/css"/>
[[--addAsset?&beforeBody=`
    <script>
      // 1. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '450',
          width: '100%',
          videoId: 'VFLDC6LEagI'
        });
     /*   
    var players = {};
    $('.play-button').each(function () {
        var id = $(this).attr('data-target');
        players[id] = new YT.Player(id,{
          height: '450',
          width: '100%',
          videoId: id
        });
        
    });
   
    console.log(players); */
      }

$('.play-button').on('click', function(){
//console.log($(this).attr('data-target'));
});

$('#myModal').on('hidden.bs.modal', function () {
//console.log($(this).attr('id'));
    player.pauseVideo();
})

$('#myModal').on('show.bs.modal', function () {
    player.playVideo();
})

    </script>`
]]
<div class="supreme-edition">
    <section id="hero" class="se-hero">
        <div class="container inner-content">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h1 class="heading text-center m-b-0">MetaTrader 4
                        Supreme Edition</h1>
                    <h3 class="subheading text-center m-y-sm">Boost your trading experience</h3>
                    <p class="text-center m-t-lg m-b-md">
                        <a href="" class="custom-btn btn-large">Free Download</a>
                    </p>
                    <p class="text-center p-t-sm m-b-lg">
                        <a href="" class="link">Open Demo Account</a>
                    </p>
              </div>
                <div class="col-md-10 col-md-offset-1">
                    <div class="text-center m-t-md p-t-sm">
                        <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/se-hero-tablet.png" class="img-responsive" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h3 class="heading text-center">MT4 Supreme is free for live and demo accounts</h3>
                </div>
                <div class="col-md-6 col-md-offset-3">
                    <h5 class="title text-center m-b-0">Benefit from the most advanced tools and improve
                        your trading experience</h5>
                </div>
            </div>
        </div>
    </section>
    <section class="light-grey-bg">
        <div class="container">
            <div class="row flex-row">
                <div class="col-xs-12 col-md-6">
                    <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/mini-terminal.png" class="img-responsive m-t-0" alt="">
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-md-5 col-md-offset-1">
                    <h5 class="title bold m-b-0">Mini Terminal</h5>
                    <h6 class="subtitle">An intuitive tool that makes it easy to manage your trades</h6>
                    <p>Opening and managing your trading positions, has never been easier</p>
                    <ul>
                        <li>Highly efficient order opening with preset stop loss, take profit and trailing stop</li>
                        <li>Integrated lot-size and margin calculator</li>
                        <li>Order templates for OCO and OCA order types</li>
                        <li>Smart order lines for partial closing, multiple and time-based stops</li>
                        <li>Fast order reversal and hedging</li>
                    </ul>
                    <div>
                        <a href="" class="link">Learn More &#10230;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container hidden-sm">
            <div class="row">
                <div class="col-sm-12">
                    <div class="custom-dashed-divider">
                        <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/[email protected]" class="img-responsive" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row flex-row">
                <div class="col-xs-12 col-md-6 col-md-offset-1 col-md-push-5 text-right">
                    <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/trade-terminal.png" class="img-responsive" alt="">
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-md-5 col-md-offset-0 col-md-pull-7">

                    <h5 class="title bold m-b-0">Trade Terminal</h5>
                    <h6 class="subtitle">Efficiently manage your whole account and all your orders</h6>
                    <p>Trade Terminal contains all the features of our Mini Terminal and several more, to empower highly efficient trade management.</p>
                    <ul>
                        <li>Multi-currency trade management</li>
                        <li>Notifications for different account states</li>
                        <li>Detailed account notifications</li>
                        <li>Easy order template creation</li>
                        <li>Advanced multi-monitoring</li>
                    </ul>
                    <div>
                        <a href="" class="link">Learn More &#10230;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container hidden-sm">
            <div class="row">
                <div class="col-sm-12">
                    <div class="custom-dashed-divider">
                        <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/[email protected]" class="img-responsive" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row flex-row">
                <div class="col-xs-12 col-md-6">
                    <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/tick-chart-trader.png" class="img-responsive" alt="">
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-md-5 col-md-offset-1">
                    <h5 class="title bold m-b-0">Tick Chart Trader</h5>
                    <h6 class="subtitle">Easily track your chart movements</h6>
                    <p>TSeeing every price movement, means you can quickly find the best entry or track price action.</p>
                    <ul>
                        <li>Track tick price movements</li>
                        <li>Different chart types available - from candlesticks and trend lines to crossover</li>
                        <li>Trade directly from the Tick Chart</li>
                        <li>Export tick data to analyse in Excel</li>
                    </ul>
                    <div>
                        <a href="" class="link">Learn More &#10230;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container hidden-sm">
            <div class="row">
                <div class="col-sm-12">
                    <div class="custom-dashed-divider">
                        <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/[email protected]" class="img-responsive" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row flex-row">
                <div class="col-xs-12 col-md-6 col-md-offset-1 col-md-push-5 text-right">
                    <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/stay-connected.png" class="img-responsive" alt="">
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-md-5 col-md-offset-0 col-md-pull-7">
                    <h5 class="title bold m-b-0">Stay Connected</h5>
                    <h6 class="subtitle">Real-time news directly in MT4</h6>
                    <p>Our connect tool provides daily economic news and allows you to analyse your trading history in real-time, for improved decision making.</p>
                    <ul>
                        <li>Real-time news and economic calendar directly in MT4</li>
                        <li>Import your own RSS-feeds to display in Connect</li>
                        <li>In-depth analysis of your trading account history</li>
                        <li>Comprehensive account trading statistics</li>
                    </ul>
                    <div>
                        <a href="" class="link">Learn More &#10230;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container hidden-sm">
            <div class="row">
                <div class="col-sm-12">
                    <div class="custom-dashed-divider">
                        <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/[email protected]" class="img-responsive" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row flex-row">
                <div class="col-xs-12 col-md-6">
                    <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/indicator-package.png" class="img-responsive" alt="">
                </div>
                <div class="col-xs-10 col-xs-offset-1 col-md-5 col-md-offset-1 m-b-0">
                    <h5 class="title bold m-b-0">Indicator Package</h5>
                    <h6 class="subtitle">Stay ahead of the pack with the latest indicators</h6>
                    <p>This ever advancing collection of indicators gives you more chart information, your order history and trading signals for your strategies. </p>
                    <ul>
                        <li>Candle countdown
</li>
                        <li>Chart group</li>
                        <li>Day session</li>
                        <li>Freehand drawing</li>
                        <li>High-low</li>
                        <li>Order history</li>
                        <li>Pivot points</li>
                        <li>Renko chart</li>
                    </ul>
                    <div>
                        <a href="" class="link">Learn More &#10230;</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="dark-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="supreme-edition-slider m-b-md">
                        <div id="carousel-example-generic" class="carousel slide">
                            <div class="row inner-wrap">
                                <div class="col-md-6 col-md-offset-3">
                                    <div class="carousel-inner" role="listbox">
                                        <div class="item active">
                                            <div class="video-block">
                                                <a href="" class="play-button" data-toggle="modal" data-target="#myModal"></a>
                                                <img src="[[++assets_common_path]]/images/page/mt4-se/page/se/admiral-markets-logo-sm.png" alt="">
                                                <h3 class="heading m-b-0 m-t-md p-t-xs">
                                                    Supreme:<br>
                                                    der Mini Terminal
                                                </h3>
                                                <p class="m-b-0">
                                                    Tuning für den Meta Trader 4
                                                </p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <h3 class="heading m-b-1 text-xs-center">Online Trading Simplified</h3>
                                            <div class="m-b-2">
                                                “MTrading Forex Training is nothing but the best. I am using this medium to say a big thank you. I don't have this knowledge before so
                                                I attended their training as a novice, but now I can trade at my own comfort. I recommended them.”
                                            </div>
                                        </div>
                                        <div class="item">
                                            <h3 class="heading m-b-1 text-xs-center">Online Trading Simplified</h3>
                                            <div class="m-b-2">
                                                “MTrading Forex Training is nothing but the best. I am using this medium to say a big thank you. I don't have this knowledge before so
                                                I attended their training as a novice, but now I can trade at my own comfort. I recommended them.”
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8 col-sm-offset-2">
                    <h5 class="title text-center m-b-md">
                        Admiral Markets invites you to be part of driving MT4's evolution. Try this advanced, quick installation and cost free plug-in on your demo or live account.
                    </h5>
                    <div class="text-center p-t-sm">
                        <a href="" class="custom-btn btn-large">Free Download</a>
                    </div>
                    <div class="text-center m-t-md p-t-sm">
                        <a href="" class="link">Register Demo Account</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">title</h4>
                </div>
                <div class="modal-body">
                    <iframe width="100%" height="350" src="https://www.youtube.com/embed/VFLDC6LEagI?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
[[$FOOTER]]
[[$HTML_END]]

http://stackoverflow.com/questions/8869372/how-do-i-automatically-play-a-youtube-video-iframe-api-muted

http://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript/

http://nicomiceli.com/youtube-embed-tracking-google-analytics/

http://stackoverflow.com/questions/8948403/youtube-api-target-multiple-existing-iframes

http://stackoverflow.com/questions/14890267/stop-all-videos-when-a-new-video-is-played

http://www.tutorialrepublic.com/faq/how-to-embed-youtube-video-inside-bootstrap-modal.php

http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal