templates/areas/video/view.html.twig line 1

{% block content %}

    {# // margin top
    $marginTop = $this->checkbox('marginTop');

    if ($marginTop->isChecked()) {
        $marginTopClass = 'margin-top';
    } else {
        $marginTopClass = '';
    } #}

    {# 8 columns #}
    {% set smaller = pimcore_checkbox('smaller') %}

    {# video mp4 #}
    {% set videoMp4 = pimcore_relation('videoMp4', {
        "types": ["asset"],
        "subtypes": {
            "asset": ["video"]
        }
    }) %}

    {# video webm #}
    {% set videoWebm = pimcore_relation('videoWebm', {
        "types": ["asset"],
        "subtypes": {
            "asset": ["video"]
        }
    }) %}

    {# poster #}
    {% set poster = pimcore_relation("poster", {
        "types": ["asset"],
        "subtypes": {
            "asset": ["image"]
        }
    }) %}

    {# youtube id #}
    {% set youtubeID = pimcore_input('youtubeID', {
        'placeholder': 'Beispiel: 6gCPGBth-5I'
    }) %}

    {# random #}
    {% set random = random() %}

    {% if editmode %}
        <div class="editmode grid-x">
            <div class="cell toggler-title">
                <div data-toggle="settings-{{ random }}">Video</div>
            </div>
            <div class="cell toggler-content" id="settings-{{ random }}" data-toggler=".is-active">
                <div class="toggler-content-panel">
                    <div class="grid-x grid-padding-x">

                        <div class="shrink cell">
                            <label>YouTube ID</label>
                            {{ youtubeID|raw }}
                        </div>

                        <div class="auto cell">
                        </div>
                    </div>
                    <div class="grid-x grid-padding-x">
                        {# <div class="cell">
                            <label>Mit Abstand oben</label>
                            <?= $marginTop ?>
                        </div> #}
                        <div class="cell">
                            <label>{{ smaller|raw }} Kleinere Breite</label>
                        </div>
                        <div class="cell">
                            <label>Video MP4</label>
                            {{ videoMp4|raw }}
                        </div>
                        <div class="cell">
                            <label>Video WebM</label>
                            {{ videoWebm|raw }}
                        </div>
                        <div class="cell">
                            <label>Video Poster</label>
                            {{ poster|raw }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if youtubeID.data or videoMp4.element %}
        <section class="section-video">
            <div class="grid-container">

                {% if smaller.checked %}
                    <div class="grid-x grid-margin-x">
                        <div class="cell small12 xmedium-8">
                {% endif %}

                    {# youtube #}
                    {% if youtubeID.data %}
                        <div class="youtube-container">

                            {#
                            <iframe 
                                src="https://www.youtube-nocookie.com/embed/{{ $youtubeID }}?autoplay=0&modestbranding=1&iv_load_policy=3" 
                                frameborder="0" 
                                allow="autoplay; encrypted-media" 
                                allowfullscreen
                            ></iframe>
                            #}

                            <div class="plyr-player" data-plyr-provider="youtube" data-plyr-embed-id="{{ youtubeID.data }}" style="--plyr-color-main: #D80000;"></div>

                        </div>

                    {# video #}
                    {% elseif videoMp4.element or videoWebm.element %}
                        <div class="video-container">
                            <video class="plyr-player" controls poster="{{ poster.element }}" style="--plyr-color-main: #D80000;">

                                {% if videoMp4.element %}
                                    <source src="{{ videoMp4.element.fullPath }}" type="video/mp4">
                                {% endif %}

                                {% if videoWebm.element %}
                                    <source src="{{ videoWebm.element.fullPath }}" type="video/mp4">
                                {% endif %}

                            </video>
                        </div>
                    {% endif %}

                {% if smaller.checked %}
                        </div>
                    </div>
                {% endif %}

            </div>
        </section>
    {% endif %}

{% endblock %}