Drupal 8: Wideo HTML Pole biblioteka obciążenie nakaz ColorBox reagującego wideo

Question

Straight to prawdziwe pytanie:

Co powoduje, że filmy będą dostosowane podczas korzystania Wideo HTML Field i ColorBox? Czy jest oparty na prawidłowej kolejności ładowania bibliotek JavaScript? A może jest to coś, co działa w module Video Embed Video?

Dłuższe Wyjaśnienie/szczegóły na temat tego, co próbuję wykonać:

buduję Drupal 8 miejsce, które ma mediów Bundle wzywamy „karty”. Karty zawierają następujące pola:

• Tytuł
• Obraz tekst
• Hover
• YouTube wideo

W stanie domyślnym, użytkownik widzi tytuł i obrazek. Po najechaniu tekst najechania zostanie nałożony na obraz. Po kliknięciu wideo z YouTube powinno zostać uruchomione w trybie Colorbox.

Używam następujące moduły ciągnąć ten off: jednostka

• Mediów
• Mediów podmiot obraz
• Wideo HTML Pole
• Colorbox

I stworzyły media Zestaw z jednostką nośnika i modułami obrazu jednostki medialnej. Dodałem pole osadzania wideo do pakietu multimedialnego w polu wideo YouTube. W ustawieniach ekranu Media Bundle ustawiłem pole Video Embed Field na Colorbox i zaznaczono opcję Responsive Video.

W tym momencie potwierdziłem, że wszystkie moje pola renderowały się zgodnie z życzeniem. Film na YouTube wyświetlał domyślną miniaturę, a modus Colorbox działał idealnie - zmieniał także rozmiar na mniejszy, gdy dostępna szerokość była mniejsza niż konfiguracja o maksymalnej szerokości.

Teraz potrzebowałem wprowadzić pewne modyfikacje, aby uzyskać tytuł, tekst i obraz po najechaniu myszą jako część klikalnego obszaru, który uruchomi Colorbox.

Utworzono niestandardowy szablon gałązki do sterowania wyświetlaniem jednostki karty/nośnika. Zauważyłem, że pole Video Embed Field jest w stanie uruchomić colorbox na podstawie klasy i atrybutu "data-video-embed-field-modal". Więc moim planem było odtworzenie tej struktury i osadzenie innych pól, których potrzebowałem wewnątrz tego diva. Oto moja gałązka Szablon:

<div{{ attributes }}> 
    {% if content %} 

    {#load libraries#} 
    {{ attach_library('colorbox/colorbox') }} 
    {{ attach_library('colorbox/init') }} 
    {{ attach_library('colorbox/default') }} 
    {{ attach_library('video_embed_field/colorbox') }} 
    {{ attach_library('video_embed_field/responsive-video') }} 

    <div class="{{ content.field_you.0['#attributes'].class.0 }}" data-video-embed-field-modal="{{ content.field_you.0['#attributes']['data-video-embed-field-modal'] }}"> 
     <div class="card-title">{{ name }}</div> 
     <div class="hover-wrapper"> 
     <div class="card-image">{{ content.field_card_image }}</div> 
     <div class="card-hovertext">{{ content.field_hover_text.0['#context'].value }}</div> 
     </div> 
    </div> 
    {% endif %} 
</div> 

Wszystko działa zgodnie z przeznaczeniem, z wyjątkiem wideo Colorbox/YouTube nie są rozmiaru w dół, gdy szerokość okna jest mniejsza niż ustawienie konfiguracji max-width. Kiedy dodaję domyślne wyjście pola Video Nest z powrotem do szablonu twig, wszystko działa poprawnie. Kod to:

{{ content.field_you }} 

To doprowadziło mnie do przekonania, że ​​problem z ładowaniem bibliotek spowodował problem.

Oto kolejność obciążenie kiedy działa prawidłowo:

<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"></script> 
<script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcv8e"></script> 

Oto kolejność obciążenie, gdy nie działa (czyli gdy nie mam domyślne Wideo HTML pola renderowania w szablonie gałązka):

<script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.2.5"></script> 
<script src="/modules/contrib/video_embed_field/js/video-embed-field.colorbox.js?okcvcl"></script> 
<script src="/modules/contrib/colorbox/js/colorbox.js?v=8.2.5"></script> 
<script src="/modules/contrib/colorbox/styles/default/colorbox_style.js?v=8.2.5"></script> 

Czy ktoś może potwierdzić, że to jest problem? Jeśli tak, jak mogę zmienić kolejność ładowania plików JS. Z góry dziękuję!

Answer 1

Nie jestem zbyt pewny w sprawie drupala, ale może to odpowiada na twoje pytanie? Elementy wideo/iframe można szybko dostosować za pomocą niewielkiej sztuczki CSS, aby zmienić je pionowo w zależności od kontenera nadrzędnego.

.vid-container { 
    position: relative; 
} 
.vid-dummy { 
    margin-top: 56%; /* this determines the aspect ratio */ 
} 
.vid-element { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

<div class="vid-container"> 
    <div class="vid-dummy"></div> 
    <iframe class="vid-element" src="https://www.youtube.com/embed/sNIEU2mVd0Q" frameborder="0" allowfullscreen></iframe> 
</div> 

Zobacz ten jsfiddle na przykład: https://jsfiddle.net/hoxxep/M5u34/