-
AuthorPosts
-
May 18, 2018 at 3:52 pm #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,
StephanMay 18, 2018 at 4:09 pm #958646ich 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.
May 18, 2018 at 4:22 pm #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?: uncheckedOh, and we use a child theme.
- This reply was modified 6 years, 4 months ago by Stephan_H. Reason: Performance settings added
May 18, 2018 at 5:08 pm #958689sorry 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 #958692I 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@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 #958758have 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 #958767With 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 #958774OK, 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!
StephanNow I have to add the poster image field code to the new video.php again…
May 19, 2018 at 7:26 pm #959158Hi Stephan_H,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.