<div class="paragraph--text-video {{ hideUnpublishClasses }} {% if mobileReverse %} mobile-reverse {% endif %} {% if vidModal %} paragraph--text-video-modal {% endif %} {{ wrapperClasses|join(' ') }} row">
  <div class="ptv__wrapper p__wrapper">
    {% set placeHolderImage = vidPlaceHolderImage is not empty?vidPlaceHolderImage: "https://i.ytimg.com/vi/#{vidId}/hqdefault.jpg" %}
    <div class="ptv__video {% if vidModal %} position-relative {% endif %}bg-white">
      {% if vidModal %}
        <div class="ptv__video-media" style="background-image: url('{{ placeHolderImage }}');" id="placeholder_{{ paragraph_id }}">
        </div>
      {% endif %}

      {% if vidModal %}
        <button type="button" class="btn ptv__video-btn" aria-label="{{ 'Play' | t }}" data-toggle="modal" data-target="#modal{{ paragraph_id }}">
          <span class="ptv__video-btn-arrow"></span>
        </button>
      {% endif %}

      {% if vidModal %}
        <div class="modal fade" id="modal{{ paragraph_id }}" tabindex="-1" role="dialog" aria-labelledby="modalDescription{{ paragraph_id }}" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content modal-edge">
              <div class="modal-body">
                {% endif %}
                <div class="ptv__video__wrapper embed-responsive embed-responsive-16by9">
                  {% if '1' not in vidHtml5 %}
                    <lite-youtube class="embed-responsive-item" videoid="{{ vidId }}" params="autoplay=1&modestbranding=1&rel=0" id="player_{{ paragraph_id }}" style="background-image: url('{{ placeHolderImage }}');"></lite-youtube>
                  {% else %}
                    {% set fileExt = vidUrl | slice(-3) %}
                    {% if  'mp4' in fileExt %}
                      {% set vidType = 'video/mp4' %}
                    {% elseif 'mp4' in fileExt %}
                      {% set vidType = 'video/ogg' %}
                    {% elseif 'ebm' in fileExt %}
                      {% set vidType = 'video/webm' %}
                    {% endif %}
                    <video class="embed-responsive-item ptv__video--html" id="player_{{ paragraph_id }}" controls>
                      <source src="{{ vidUrl }}" type="{{ vidType }}">
                      {{ 'Your browser does not support the video tag.' | t }}
                    </video>
                  {% endif %}
                </div>
                {% if vidModal %}
                <script>
                  window.addEventListener('load', function() {
                    jQuery(document).on('show.bs.modal', '#modal{{ paragraph_id }}', function () {
                      jQuery(this).appendTo('body');
                      jQuery('#mm-0').css("filter", "blur(5rem)");
                    });
                    jQuery(document).on('hidden.bs.modal', '#modal{{ paragraph_id }}', function () {
                      jQuery('#player_{{ paragraph_id }}').attr('src', jQuery('#player_{{ paragraph_id }}').attr("src"));
                      jQuery('#mm-0').css("filter", "none");
                    });
                  });

                </script>
                <button type="button" class="close upper-right-over" data-dismiss="modal" aria-label="{{ 'Close' | t }}">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
    <div class="ptv__content {{ background_color }} {% if contentNoPadding %} p-0 {% endif %} ">
      {% if displayArrow %}
        <div class="ptv__arrow ptv__arrow-right {{ background_color }}"></div>
      {% endif %}
      {{ content }}
    </div>
  </div>
</div>