Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 18, 2018 at 3:52 pm #958638
    Stephan_H

    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

    May 18, 2018 at 4:09 pm #958646
    Guenni007

    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, 6 months ago by Guenni007.
    May 18, 2018 at 4:22 pm #958656
    Stephan_H

    @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, 6 months ago by Stephan_H. Reason: Performance settings added
    May 18, 2018 at 5:08 pm #958689
    Guenni007

    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

    May 18, 2018 at 5:11 pm #958692
    Guenni007

    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.

    May 18, 2018 at 6:00 pm #958747
    Stephan_H

    @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).

    May 18, 2018 at 6:18 pm #958758
    Guenni007

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

    May 18, 2018 at 6:37 pm #958767
    Stephan_H

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

    May 18, 2018 at 6:48 pm #958774
    Stephan_H

    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…

    May 19, 2018 at 7:26 pm #959158
    Victoria

    Hi Stephan_H,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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