Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 30, 2025 at 5:38 pm #1480481
    playa-media

    Hi,
    on my current project there is a video within a color section which is displayed in three sizes depending on window size (defined by media queries). I would like to change this to a proper solution, that means when I reduce the window size from right to the left, the video should be scaled accordingly so it is always fully visible and centered in the window.

    Link: https://www.bhe-architektur.at/architektur-am-traunsee/
    See the last video on the page with the sketch animation.

    March 30, 2025 at 6:49 pm #1480484
    Guenni007

    have a look to this solution for another participant:
    https://webers-testseite.de/html5-video-fanlokbun-2/

    in your case you do not need to place the column on the right side with an empty column before. That position is ruled by css only.

    see: https://webers-testseite.de/html5-video-bhe/
    your heading and text is inside that overlay column.

    PS: if you do not like that i use your video here – tell me after you have seen the demo page and i will replace it by a different video.

    PPS: the font-size-adjust property seems not to be supported by all browsers – so for very small screens you had to adjust the font-size by conventional methods

    March 31, 2025 at 6:48 am #1480499
    Ismael

    Hi,

    Thank you for the inquiry.

    You may need to remove the css rules that define specific dimension to the video on different screens sizes such as this:

    .bheAnimation {
    background-color: #fff !important;
    width: 807px !important;
    height: 504px !important;
}

    Then, try to add this to make sure that the whole video is visible within the container:

    #top .avia-video .mejs-container, #top .avia-video .mejs-container video {
    object-fit: contain;
}

    This might create black spaces around the video.

    Best regards,
    Ismael

    March 31, 2025 at 10:08 am #1480516
    playa-media

    Hi Ismael,

    thanks for your quick response!
    I’ve removed the css rules with the specific dimensions and added your code but now the video is not displayed at all.

    Best regards,
    Stefan

    March 31, 2025 at 10:17 am #1480517
    playa-media

    Hello Guenni,

    thanks for your support, I will try it!
    First of all please replace the video (which is licensed stock video) by the video at the bottom of the page (architekturbuero_bhe_architektur_traunsee_animation.mp4). It should be displayed centered in the text block’s width (not in fill width).

    Best regards,
    Stefan

    March 31, 2025 at 11:06 am #1480519
    Guenni007

    yes – gone with the wind …
    PS: The special feature is that it can even be played on mobile devices.

    By the way – if you look at the DOM, how the advanced layerslider implements these videos – it’s the way I do it on my site.
    PPS: The advanced layer slider is also able to behave in a responsive way on video backgrounds, and shows videos on mobile devices.

    https://webers-testseite.de/advanced-layerslider-responsive-background-video/

    March 31, 2025 at 9:48 pm #1480540
    playa-media

    Thanks a lot for your support, Guenni – that works perfectly!

    Best regards,
    Stefan

    April 1, 2025 at 5:21 am #1480552
    Ismael

    Hi,

    Great! Glad to know that this has been resolved. Let us know if you have more questions. Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Scaling and aligning videos’ is closed to new replies.