Fix iframe CSS

[hugolpz]

Concerned files

• ./SignItVideosGallery.js -- generate the gallery, with previous/next arrows, iframe, and credits ; pass parameters via url parameters to the iframe.
• ./SignItVideosIframe.html -- handle the iframe's content, can receive url parameters to set the iframe's size

Action

• [x] Make iframe border invisible / seemless
• [x] Ensure sizes of iframe and video elements are complementary
  • mix of width:250px for the iframe ; then width:100% inside the iframe ?)
• [x] Check result is elegant for modal, popup, and wpintegration (ex: on Crabe)
• [x] Position the arrows over the iframe-video, like for Wikipedia galleries, example

This is likely a classic need with answers online or via ChatGPT-likes.

Current state

All those states are derivated from the 2 files cited above. (My connexion was very slow so the video are black but they are working fine).

Modal

Popup

wpintegration

Arrows over video

[saltykheera]

Assign this issue to me.

[hugolpz]

Hello @saltykheera , happy to see you around. Given your enthusiasm lets assign this issue to you yes. 👍🏼

[saltykheera]

screen-recorder-fri-jul-26-2024-18-27-32.webm

@hugolpz does this type of design works for the btns ?

[hugolpz]

Hello @saltykheera , Nice pick for the song clip. (1) Can you share the code ? (2) Our Gallery with prev/next > iframe > video element approach is a bit weird it's better if you work on the extension directly. Were you able to load SignIt and inspect the video gallery ? (the thing which contains the iframe) (3) For prev/next let's follow the no chratjunk principle, minimize the noise and remove Prev and Next strings and only keep the arrows.

[hugolpz]

After verification, the generated html has the following structure :

<div class="signit-inline-container">

  <!-- Added comment: arrow prev -->
  <span class="oo-ui-widget ..." aria-disabled="true">
    <a class="oo-ui-buttonElement-button" ...>
      ... (prev)
    </a>
  </span>

  <div class="signit-panel-videos-gallery">
    <!-- Added comment: iframe 1 -->
    <div style="">
      <iframe ...></iframe>
      par Yug – Vidéo 1 sur 4
    </div>
    <!-- Added comment: iframe 2 -->
    <div style="display: none;">
      <iframe ...></iframe>
      par Elix – Vidéo 2 sur 4
    </div>
    <!-- Added comment: iframe 3 -->
    <div style="display: none;">
      <iframe ...></iframe>
      par Caroline – Vidéo 3 sur 4
    </div>
    <div style="display: none;">
      <iframe ...></iframe>
      par Roy Batty 82 – Vidéo 4 sur 4
    </div>
  </div>

  <!-- Added comment: arrow next -->
    <span class="oo-ui-widget ..." aria-disabled="true">
    <a class="oo-ui-buttonElement-button" ...>
      ... (prev)
    </a>
  </span>

</div>

I know it relies on ./SignItVideosGallery.js (gallery with prev/next and list of iframe), ./SignItVideosIframe.html (iframe and video). After inspecting it also relies on ooui.js (to generage the html buttons), oojs-ui-wikimediaui.min.css .

The code is more complex due to ooui , but since we want to phase it out, it woulld be a good idea to move those two buttons to simpler html code.

[saltykheera]

@hugolpz check if this works fine for now then if all ok i will create a PR

[hugolpz]

Let me check this tonight. ✌🏼

[kabir-afk]

Completed in referenced PR above 🎉🎉

[hugolpz]

Thank you for this push forward, screenshots below is what I get from PR #119.

Chrome

Firefox

Room for progress

I still see room for progress so I'm doing a rapid push as well.

Example porfolio :