0

Tried with default theme: No, but I did try to rollback to previous versions of our Divi theme. All videos were working previously.

Tried with all other plugins disabled: Yes

Browser version: Safari 12.1.2

Shortcode/URL with the issue: https://www.dropbox.com/s/9zcyhwmdw6p4z3f/SettingUpthewheelandwedging.mp4?raw=1

Page showing the issue: https://www.queencityclay.com/arve-test/

Debug Info:

ARVE:               9.5.3-beta1
ARVE Pro:           NOT INSTALLED
ARVE AMP:           NOT INSTALLED
ARVE Sticky Videos: NOT INSTALLED
ARVE Random Video:  NOT INSTALLED
WordPress Version:  5.6.2
PHP Version:        7.4.15
REST URL:           https://www.queencityclay.com/wp-json/nextgenthemes_arve/v1

ACTIVE PLUGINS:
Akismet Anti-Spam: 4.1.8
ARVE Advanced Responsive Video Embedder: 9.5.3-beta1
Breadcrumb NavXT: 6.6.0
Data Tables Generator by Supsystic: 1.10.4
Disable Right Click For WP: 1.1.6
Divi Booster: 1.3.5
Elegant Themes Updater: 1.2
Embed Plus for YouTube - Gallery, Channel, Playlist, Live Stream: 13.4.1.2
EWWW Image Optimizer: 6.0.3
FooBox Image Lightbox: 2.7.16
FooGallery: 1.10.3
Google Analytics Dashboard for WP (GADWP): 6.6.2
Google XML Sitemaps: 4.1.1
Login Page Styler: 5.3.5
MemberPress Basic: 1.9.10
MemberPress Constant Contact: 1.1.3
MimeTypes Link Icons: 3.2.8
Really Simple SSL: 4.0.9
Shortcake (Shortcode UI): 0.7.4
Sitemap Generator: 1.7.1
Smash Balloon Instagram Feed: 2.8.1
Super Socializer: 7.13.13
The Events Calendar: 5.4.0
Titan Anti-spam & Security: 7.2.5
Ultimate FAQ - WordPress FAQ Plugin: 1.9.11
Very Simple Google Maps: 2.8.4
WordPress Importer: 0.7
WPCoreSys: 2.0
WP Dashboard Notes: 1.0.10
WP Fastest Cache: 0.9.1.5
WP Robots Txt: 1.1
WP Rollback: 1.7.1
WP show more: 1.0.7


ARVE Options:
array(2) {
  ["play_icon_style"]=>
  string(6) "circle"
  ["disable_links"]=>
  bool(true)
}

Dismissed Notices:
array(1) {
  [0]=>
  array(1) {
    [0]=>
    string(17) "ngt-arve-addon-ad"
  }
}

All the videos using ARVE on our WordPress site will not play on Safari.  When you click there’s a blank white screen behind the overlaid image, nothing trying to load.   Same issue using Safari, Chrome, & Duck Duck Go browsers on iPhone.  Just looks like there’s nothing there.  Videos are playing normally on Chrome, Microsoft Edge, and Firefox on desktop & laptop.  Have not tried on Android  

We are using URL link from Dropbox to embed videos.  I have tried rolling back to earlier versions of ARVE and Divi to see if that would correct the problem with no success.  Tried turning on and off a few settings in ARVE, no luck.  Turned on Safe Mode to disable all plugins. Cleared cache on Browser, Divi, and WP….

Any help would be greatly appreciated.  I’m not an IT person, so if I’ve left out any crucial info please let me know, in laymans terms if possible, what you need/where I might find that.  Thanks for your time.

Posted new comment

The videos are not generated with ARVE at all. I just see Divi elements. You can use shortcodes or even Gutenberg blocks inside Divi I think. I do not know how you embedded these videos and if videos get taken over by ARVE inside Divi.

Got it. Thanks for the reply. I assumed the Divi video module was using ARVE bc it wouldn’t play dropbox videos at all until ARVE was installed. I can embed an ARVE video in a text module, which is where I started, but it won’t display the video in the center of the module or display the thumbnail image. The video appears as a black rectangle and plays on the far right side, so you can only see a sliver of the video unless you expand the screen. I’ve been working on this, changing ARVE settings and changing them back, but can’t get it to display properly. Changing settings within Divi does not affect the location of the video inside the module. Here’s what it looks like on the test site: https://www.queencityclay.com/arve-test/
First video is using ARVE. I have everything aligned left.

Independently of ARVE or DIVI. Did you try to open the files directly in the browsers you can not see them playing? Do they play if you open the … mp4?raw=1 files?

Yes, they do. Tried Safari and Chrome.

I have a deeper look later on but in desktop in Brave I can see the black video in the left is now embedded with ARVE. You have an empty paragraph element above it that pushes the video down. For thumbnail to work with lazyload mode that seems similar to what the DIVI element is doing you need ARVE Pro. https://nextgenthemes.com shows how it can look like. There are several ways how the thumbnail can be set including a fallback default, post thumbnail … . But I see you used a uploaded image the the DIVI module. You have to manually set a thumbnail by using a shortcode like this

[arve mp4="https://your dropbox mp4" thumbnail="https://yourimage.url" /]

Or set it in the Block Sidebar if you use the ARVE block.

So from what I am seeing it works as expected. When the first frame of the video is black, and you not manually set a thumbnail it will be black. You can set a thumbnail with the free plugin, but it will have the browsers own video players and controls showing. Lazyload is actually not needed for speed when it comes to mp4 files but is just looks better.

Actually not url= but mp4= url works only if the URL ends with mp4 and that is not the case for these dropbox likes that end with ?raw=1 but I can actually improve on that.

Understood about the thumbnail. Thanks. What about the positioning of the video? Works fine on Chrome and even iOS, but on Safari on desktop it’s not centered, but pushed to the right so you can only see a small portion of the left side of the video. Thoughts on how to fix that? If I can get this working and looking right on all browsers we will probably upgrade to pro.