{#
/**
 * @file
 * Default theme implementation of a media library item.
 *
 * This is used when displaying selected media items, either in the field
 * widget or in the "Additional selected media" area when adding new
 * media items in the media library modal dialog.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - content: The content of the media library item, plus any additional
 *   fields or elements surrounding it.
 *
 * @see template_preprocess_media_library_item()
 *
 * @ingroup themeable
 */
#}
<div{{ attributes }}>
  {% if content.rendered_entity['#media'].field_media_video_file.entity %}
    {% set preview_link = content.rendered_entity['#media'].field_media_video_file.entity.uri.value %}
    {{ content|without('remove_button') }}
    <div class="remove-preview-wrapper">
    {{ content.remove_button }}
    <div class="preview-link">
    <a href="javascript:void(0);" class="open-popup">
      Open Video
    </a>
    <div class="video-popup hidden">
      <div class="video-popup-inner">
        <!-- Close button -->
        <span class="close-popup">X</span>
        <!-- Video element -->
        <video class="video-element" width="600" controls>
          <source src={{ file_url(preview_link) }} type="video/mp4">
          <source src={{ file_url(preview_link) }} type="video/webm">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
    </div>


  {% else %}
    {{ content }}
  {% endif %}
</div>