Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/code/Cnc/CsBlock/view/frontend/templates/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<?php


/**
 * Copyright (c) 2020 Kaliop Digital Commerce (https://digitalcommerce.kaliop.com) All Rights Reserved.
 * https://opensource.org/licenses/OSL-3.0  Open Software License (OSL 3.0)
 * Cnc
 * Radosław Stępień <[email protected]> <[email protected]>
 */
/** @var Cnc\CsBlock\Block\Video $block */
$videoId = $block->getVideoId();
$videoTitle = $block->getVideoTitle();
$mobileImage = $block->getMobileImage();
?>
<?php //phpcs:disable ?>

<section id="videoPresentation" class="cs-block video-presentation" data-displayed-on-scroll="">
    <div class="cs-block__container">
        <div class="video-presentation_container">
            <div id="iframeVideo"></div>
        </div>
    </div>
    <h2 class="cs-block__title">
        <?= $block->escapeHtml($videoTitle) ?>
    </h2>
</section>

<script>

    function addimgMobile () {
        var imgMobile = '<?= html_entity_decode($block->escapeHtml($mobileImage)); ?>';
        var imgMobileContainer = document.createElement('div');
        imgMobileContainer.setAttribute('id', 'videoImgMobile');
        imgMobileContainer.classList.add('s-show');
        var mainContainer= document.querySelector('#videoPresentation .cs-block__container');

        imgMobileContainer.innerHTML = imgMobile;
        mainContainer.appendChild(imgMobileContainer);
    }

    if (window.matchMedia("(min-width: 768px)").matches) {

        // Load the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
        tag.setAttribute('id', 'youtube_iframe');
        tag.src = "https://www.youtube.com/player_api";
        tag.async = true;
        var container = document.querySelector('#videoPresentation .cs-block__title');
        container.parentNode.insertBefore(tag, container);

        var player;
        var videoId='<?= $block->escapeHtml($videoId) ?>';
        var startSeconds = 0    ;  // set your own video start time when loop play
        var endSeconds = 27;   // set your own video end time when loop play
        var playerConfig = {
            width: '100%',
            videoId: videoId,
            playerVars: {

                loop: 1,
                autoplay: 1,            // Auto-play the video on load
                controls: 0,            // Show pause/play buttons in player
                showinfo: 0,            // Hide the video title
                modestbranding: 1,      // Hide the Youtube Logo
                fs: 1,                  // Hide the full screen button
                cc_load_policy: 0,      // Hide closed captions
                iv_load_policy: 3,      // Hide the Video Annotations
                start: startSeconds,
                end: endSeconds,
                autohide: 0, // Hide video controls when playing
            },
            events: {
                'onStateChange': onStateChange,       // reference to Iframe API
                onReady: function(e) {              // mute the video when loaded
                    e.target.mute();
                }
            }
        };

        //excute the video in div
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('iframeVideo', playerConfig);
        }

        //repload the video when onStateChange=YT.PlayerState.ENDED)
        function onStateChange(state) {
            if (state.data === YT.PlayerState.ENDED) {
                player.seekTo(startSeconds);
            }
        }
    } else {
        addimgMobile();
    }

</script>

<?php //phpcs:enable ?>