Question 244090 in Html Question posted in
Some basic documentation can be found here.

Html – Force Video.js player to stick to edges of browser (responsive?)

There have been a few questions on this matter and sadly for me none of them have worked.

First I want to show you a screenshot so you understand what I am asking for

video player not positioned correctly and videojs controlbar is hidden

Here is my current code for the embed:

<div class="embedded clear-adblock">
   <div style="position: relative !important; width: 100% !important; height: auto !important;">
      {% include '@themePath/account/partial/_preview_video_'~videoPlayer~'.html.twig' with {'IS_EMBED': IS_EMBED} %}
   </div>
</div>

I have tried adjusting width and height, height with 0 and auto. Played around with positioning and vjs fluid is enabled

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed this right after posting this question by removing vjs fluid from videojs and using the following CSS in div:

    position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

  2. 0

    As in video.js there will be Dynamically rendered classes after you run the HTML file on the browser . So , Don’t put inline css on the embed , inspect the video element and you will get the necessary classes , after you found those essential classes from that video container , style that as you want using embedded css on the same page , I think this will help you .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search