-
Posts
-
I cannot figure out how to align the video properly for tablet and mobile view. The video will first of all not show up besides the play button and when pushing the play button the video is aligned somewhere outside the screen, partially visible.
Any idea how to get this in order without custom css?Thanks a lot and best regards,
MariekeHi,
Thanks for giving us admin access.
I have removed the 250px left and right padding on the columns.
Then in Quick CSS, located in Enfold > General Styling added this CSS code:#top .avia_textblock .wp-video { margin-left: auto; margin-right: auto; max-width: 100%; }this will make sure the video shortcode inside a textblock will always be centered and have it’s maximum width set to 100%.
Also I have disabled CSS file merging and compression in Enfold > Performance since the added CSS is not reflecting on the frontend because of the server side caching.
You can enable it after few days.
Hope this helps.Best regards,
NikkoHi Nikko,
Great, thanks a lot – looks good now but still the issue with NO preview picture of the video. Only the play button is visible when visiting the subpage. As soon as you plaid the video once, it shows up. Can I send you a screen shot from my cell phone, I don’t see that option here?
Thank you very much and best regards,
MariekeHi Marieke,
You can’t upload the screenshot here directly.
But you can upload it to https://imgur.com/ or any other online image sharing sites and then post the link here. :)Best regards,
NikkoHi Nikko,
Ok, here we go – wetransfer link for downloading the screenshot:Thanks a lot and beste regards,
MariekeHi Marieke,
I apolgize for the delayed response.
I think you should use the poster attribute for that: https://wordpress.org/support/article/video-shortcode/
Also, maybe you can try Video element that we have, it has better options.Best regards,
NikkoHi Nikko,
No problem, thanks for the answer.
I will try the shortcode but the video element doesn’t work for me as there’s still no full screen option when using the video element unfortunatelly.
If you could one day implement that option to the video widget, that would be really helpful – I’m not the only one being of need of a full screen view option…Thanks a lot and best regards,
MariekeHi Marieke,
You’re welcome and glad that we could help.
As for the Video Element, Enfold uses embed shortcode instead of the video shortcode because the latter does not support muted videos via an attribute.Best regards,
NikkoHi Nikko,
I already used the shortcode to my understanding in the text block element. I also tried it with a code block element but same result in mobile view – tablet and cell phone – there’s only a play button visible but not the picture of the video (start picture). Any possibility to fix this???Thank you very much and best regards,
MariekeHi Marieke,
I have checked your site and in the Technology page there’s no poster attribute with the location of the image for the poster on it.
Please add the poster attribute and the location of the image to be used: https://wordpress.org/support/article/video-shortcode/Best regards,
NikkoHi Nikko,
We have trouble with another video/animation mp4 in mobile view: on our startpage there’s this color section with a video, running fine but on cell phones and tablets the video is loading super long until it starts – ugly. Any idea how to speed-up that loading time?
Thanks a lot and best regards,
MariekeHi Marieke,
The background video is fetched from your site and consumes resources from your server.
The best and cheapest method to resolve this is to upload the video to youtube or vimeo.Best regards,
NikkoHi Nikko,
Well, I highly doubt that that is the reason, as the issue apparently doesn’t exist with other android devices – it’s only an apple device issue.
And since the video is playing fine on all other screens, I wouldn’t know why this has anything to do with a server. Or do apple mobile devices need more server resources in general???Thanks a lot and best regards,
MariekeHi Marieke,
Are you using safari browser? can you try to check if this also happens when using firefox and chrome in an apple device?
Best regards,
NikkoHi Nikko,
Yes, it seems to be a Safari problem since I just tested again on my macBook using Safari. Weird, I think I did that before on iMac and macBook and it worked properly with Safari too. Well, maybe not since it’s not working now.
A lot of people are using Safari though – how can we make it work for all browsers?Thanks a lot and best regards,
MariekeHi Nikko,
In the meanwhile I installed Chrome on my iPhone and have the same issue.
So, it is not purely a Safari issue apparently.
I cannot scale the video down as the size of 10 MB is the lowest possible without losing quality.
I might have to outsource the video to Vimeo.Any other ideas on that?
Thank you very much and beste regards,
MariekeHi Marieke,
I think that could be because both Safari and Chrome are webkit but I’m not really sure about this one.
I tried to check on the issue and according to an article iphones and ipads have some issue with poster attribute, can you try to remove and check?
– http://diveintohtml5.info/video.html#iosHere’s a discussion I could find:
– https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipadHere’s also has some information regarding the issue that may clear up some things:
– https://confluence.atlassian.com/confkb/unable-to-play-embedded-mp4-videos-on-ipad-or-iphone-in-confluence-305037325.htmlBest regards,
Nikko
- You must be logged in to reply to this topic.