Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #958638

    Hi,

    WordPress 4.9.6, Enfold 4.3.2.

    Using the video element to embed a YouTube video results in strange dimensions and orientation of the embedded rectangle. See https://www.anne-swoboda.de/puppenspiel/vom-fischer-und-seiner-frau/
    When the video is played, there are thick black bars above and below.
    This is independent of the video format selected in the video element. (The video has 4:3 format.)

    Same happens if just the YouTube link is placed in a text block there.

    Could you please check that?

    Thanks,
    Stephan

    #958646

    ich kann es so nicht nachvollziehen. Denn wenn ich es als Enfold ALB setze in zB 1/2 container und das Videoformat mit 4:3 angebe, dann wird es richtig angezeigt.

    edit : Deine ganze video.css Datei wird nicht geladen:
    Hast du bei performance eventuell nötige Teile abgeschaltet?
    Wenn ich den Inhalt der Video.css Datei bei Dir (via browser developer tools ) virtuell hinzufüge läuft es so wie bei mir

    /* ======================================================================================================================================================
    Video
    ====================================================================================================================================================== */
    .avia-video, .avia-iframe-wrap{clear:both; position: relative; margin-bottom:20px; }
    
    /*responsive iframe trick*/
    .avia-video iframe, .js_active .avia-iframe-wrap iframe, div .avia-video .avia-iframe-wrap{position: absolute; width:100%; height:100%; left:0; top:0; padding:0;}
    .avia-video-custom{height:0;}
    .avia-video-16-9, .js_active .avia-iframe-wrap{padding-bottom: 56.25%; height:0;}
    .avia-video-4-3{padding-bottom: 75%; height:0;}
    
    /*html 5 video - always has 100 width and natural height. behaves like image when it comes to aspect ratio*/
    
    video{
    	width:100%;
    	height:auto;
    }
    
    .mejs-layer {
        z-index: 1;
        width: 100% !important;
    }
    
    .mejs-layer.mejs-overlay-play{
    	height:100% !important;
    }
    
    #top .avia-video .mejs-container, 
    #top .avia-video .mejs-container video{
    	height:100% !important;
    	width: 100% !important;
    	position: absolute;
    }
    • This reply was modified 6 years, 4 months ago by Guenni007.
    #958656

    @Guenni007: Ja, bei dir sieht das so aus wie es soll. :)

    I have a 2/3 – 1/3 – page. The video is embedded in the 2/3 cell. Above the video is a text block, below is a separator element.

    There are more strange video phenomena: On this page: https://www.anne-swoboda.de/puppenspiel/der-wunderbare-massenselbstmord/ we embedded a self-hosted video by script. It’s supposed to be contained in its 2/3 cell, but stretches full width. If we use the video element of Enfold instead, everything’s a mess: video rectangle is full width, but player elements are tiny and placed somewhere middle left, and all following elements in the same cell are missing.


    @guenni007
    : Ah, guter Hinweis. Hier sind meine aktuellen Performance-Einstellungen:

    CSS file merging and compression: Disabled
    Javascript file merging and compression: Disabled
    Disabling of template builder elements: Always load all elements
    Disable self hosted video and audio features: unchecked
    Disable external video features: unchecked
    Delete old CSS and JS files?: unchecked

    Oh, and we use a child theme.

    • This reply was modified 6 years, 4 months ago by Stephan_H. Reason: Performance settings added
    #958689

    sorry i thought because of a german title that you are natively spoken english.

    If you do not find the reason for that – you can add that via quick css, till you find the reason for it.

    try this – and see if your troubles are gone – afterwards we can see where the fault is

    #958692

    I have my guess. Did you update the theme via ftp? And did you do it by overwriting the existing files?
    Then the reason is clear to me.

    #958747

    @Guenni007: I’m native German, but many readers here won’t be, so I thought it best to write in English to the benefit of all who may experience the same video problem. ;-)

    I updated the theme from the WP backend (Enfold -> Theme Update).

    #958758

    have you tested to insert that little css above in your quick css and have a look what happens.

    #958767

    With your code in the quick css it works! But why is this? Should work without any extra css code, shouldn’t it?

    #958774

    OK, found it! :)
    I had a customized video.php file in my child theme shortcodes folder. (It added a poster image field to the video element). Removed it. Now it works.

    Thank you for your help!
    Stephan

    Now I have to add the poster image field code to the new video.php again…

    #959158

    Hi Stephan_H,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.