<?php
/**
 * Copyright © 2017 Codazon, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>

<?php
$video = $block->getData('video_data');
$placeholder = $video->getData('placeholder');
$widget = [
    'Codazon_ThemeLayoutPro/js/plugin' => [
        'codazon.videoframe' => [
            'url'                   => $video->getData('video_url'),
            'use_df_placeholder'    => (bool)$video->getData('use_df_placeholder'),
            'dimensionRatio'        => $video->getData('ratio')
        ]
    ]
]
?>
<div class="cdz-video video-no-loaded" data-mage-init='<?php echo json_encode($widget) ?>'>
    <div class="cdz-video-inner">
        <div class="brand-loader double-bounce-spinner" data-role="video-loader">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
        <img class="img-responsive video-placeholder" data-role="video-placeholder" data-src="<?php echo $placeholder ?>" />
        <div class="video-player" data-role="play-video">
            <div class="video-player-icon">
                <span><svg id="plyIcn" viewBox="0 0 11.2 15.3" width="8" height="10"><path d="M0.8,15.3c-0.2,0-0.5-0.1-0.6-0.3c-0.2-0.3-0.2-0.8,0.2-1l8.8-6.3L1.5,2.2v4.1C1.5,6.7,1.2,7,0.7,7S0,6.7,0,6.3V0.8c0-0.3,0.2-0.5,0.4-0.7C0.7,0,1,0,1.2,0.1L10.8,7c0.2,0.1,0.3,0.4,0.3,0.6S11,8.1,10.8,8.3l-9.7,6.9C1.1,15.3,0.9,15.3,0.8,15.3z"></path></svg></span>
            </div>
        </div>
    </div>
</div>