This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Background video on mobile

Open 20 replies pluginplugin-page-builderquestion
LiSkynd
5 years ago · Last reply by Andrew Misplon 5 years ago

How can i change the way the background video is not showing up on mobile? I noticed that the video shows in my crappy tablet, that is way way older than my phone and the video hardly rolls on that, but it still rolls. The phone always shows the “fallback poster” and i was just thinking that it seems like it’s only the size of the screen @media (max-width: 767px)
Is there a way the disable that? Where is the code for it or something?

And yes i know about the new Hero widget but i will get back on that and why i cant use it.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

20
  1. Andrew Misplon Staff 5 years, 11 months ago

    Hi LiSkynd

    Thanks for reaching out.

    Do you have a public URL where we can take a look at what’s going on?

  2. LiSkynd 5 years, 11 months ago

    Thanks for the reply Andrew :)
    Here
    http://www.burbur.jirina.fi/

  3. Andrew Misplon Staff 5 years, 11 months ago

    Thanks, please, can you let us know which phone and browser you’re testing with. At the moment, I’m unable to recreate the issue on an iPhone 10 in Chrome or Safari.

  4. LiSkynd 5 years, 11 months ago

    I have iPhone SE and tested with Safari, Chrome and Firefox and none of them rolls the video. Only the GIF animation. Are you sure it wasnt the GIF animation that plays? The gif is a short 3 second loop, but the video should be about 29 seconds long.

    If the video works on newer phones, im happy with that but please confirm that its not the gif anim.

  5. Andrew Misplon Staff 5 years, 11 months ago

    Thanks for the feedback, yes, it looks like the GIF, not the video.

    Here is a similar question and feedback from the plugin author https://wordpress.org/support/topic/video-not-working-safari-ios/. As is, the plugin won’t play videos on mobile. The author is suggesting manually changing a library in the plugin to make the change.

  6. LiSkynd 5 years, 11 months ago

    This sounds interesting but now when i took a look at it, i’m not sure how to replace that jquery.background-video.js :/ … or should i just go to FTP and wp-content > plugins> … etc. and replace that .js file there?
    I did that but it still doesnt work. :/

    Maybe i ask the guy there …!

  7. Andrew Misplon Staff 5 years, 11 months ago

    Did you replace jquery.background-video.js in the plugin’s /assets/ folder? Did your FTP plugin alert you to overwriting the file?

  8. LiSkynd 5 years, 11 months ago

    Yes thats exactly what i did. I renamed the old file (learned that the hard way some time ago :D ) to jquery.background-videoX.js and then uploaded the new file. Can you take a look?
    http://www.burbur.jirina.fi/
    It doesnt work on my iPhone SE anyway. I wonder what am i doing wrong :/

  9. Andrew Misplon Staff 5 years, 11 months ago

    I can’t see a change on my phone.

    I recommend adding a unique note to the comments header of the file you’re uploading so you can use your browser’s developer tool to check that the updated file is the one being used. If you’re using a caching plugin you might need to clear it.

  10. LiSkynd 5 years, 11 months ago

    Thanks, i did that. Just checked and yes the file is there. If you check, you should see this on top of the comments:
    // NOTE THIS WAS UPLOADED 2020-3-2

  11. Andrew Misplon Staff 5 years, 11 months ago

    I can see the note. I’m, unfortunately, not sure. Perhaps check if there is a change if you remove the fallback poster?

  12. LiSkynd 5 years, 11 months ago

    No change … well, yes, the fallback poster is not there anymore but it didnt make the video show. At least not on my end.

    I will try to ask the other guy.
    Thanks for your time Andrew :)

  13. Andrew Misplon Staff 5 years, 11 months ago

    Thanks for the update.

    Sounds good. Hopefully, the plugin author replies.

  14. LiSkynd 5 years, 11 months ago

    Hey, the guy who made it work said:
    “”Have you added the

    playsinline muted

    attributes to your video tag?””
    I tried to ask where to add that but he didnt reply.

    I then found that maybe this is what i should add

    <video autoplay muted playsinline controls>
   <source src=\"video.mp4\" type=\"video/mp4\">
   <source src=\"video.webm\" type=\"video/webm\">
</video>

    But where do i add that? I am using the BG video in the EDIT ROW and then ROW STYLES > Background Video but i can’t add HTML there … can i?

  15. Andrew Misplon Staff 5 years, 11 months ago

    I’ve taken a look. Unfortunately, at the moment, I’m not sure where playsinline muted would be inserted in the plugin settings as they’re added to Page Builder.

  16. LiSkynd 5 years, 11 months ago

    Hmmm…. i tried to look the link he posted when he had the problem but i couldnt figure it out.

    https://nonnas2.effectiveonline.marketing/

    When i looked at the source code of that page, i can easily find the playsinline in the line 984, but i can’t figure it out from that. Can you?

  17. LiSkynd 5 years, 11 months ago

    I even made it work in W3Schools :D

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video

    Even that didnt work on iPhone until taht one word “playsinline”
    Their original code was

    <video autoplay muted loop id="myVideo">

    I had to edit it directly on phone but this started the video roll:

    Now i just have to figure out how to add it to the SO BG video :/

  18. Andrew Misplon Staff 5 years, 11 months ago

    Thanks for the updates. I’m, unfortunately, not sure where that parameter would be added within the plugin’s settings.

  19. LiSkynd 5 years, 11 months ago

    YAY! I finally found out the file where to add the “playsinline” :D
    Here’s how:
    Go to file manager on your website (FTP or cPanel…) and find this:
    wp-content > plugins > video-backgrounds-for-siteorigin-page-builder
    and download
    background-videos-for-siteorigin.php file.
    (and back up the original file in case something goes tits up)

    Edit the video tag in it like this

    <video 
				id="<?php echo 'so_bgvideo_' . $row_id; ?>" 
				class="so_video_bg jquery-background-video" 
				playsinline 
				loop 
				autoplay 
				muted
				data-bgvideo
				<?php echo ( $poster_image ) ? 'poster="' . $poster_image_src . '"' : ''; ?>
				<?php echo ( $fade_in ) ? 'data-bgvideo-fade-in="500"' : 'data-bgvideo-fade-in="0"' ?>
				<?php echo ( $pause_after ) ? 'data-bgvideo-pause-after="' . $pause_after . '"' : ''; ?>
				<?php echo ( $pause_play_button ) ? 'data-bgvideo-show-pause-play=true' : 'data-bgvideo-show-pause-play=false'; ?>
				<?php echo ( $pauseplay_xpos ) ? 'data-bgvideo-pause-play-x-pos="' . $pauseplay_xpos . '"' : ''; ?>
				<?php echo ( $pauseplay_xpos ) ? 'data-bgvideo-pause-play-y-pos="' . $pauseplay_ypos . '"' : ''; ?> 
				>
					<?php echo ( $mp4_url ) ? '<source src="' . $mp4_url . '" type="video/mp4">' : ''; ?>
					<?php echo ( $webm_url ) ? '<source src="' . $webm_url . '" type="video/webm">' : ''; ?>
					<?php echo ( $ogg_url ) ? '<source src="' . $ogg_url . '" type="video/ogg">' : ''; ?>
			</video>

    Make sure it says like this:
    playsinline
    loop
    autoplay
    muted
    and upload it back to your site’s folder. and BAM the video plays on iPhone :D

    Can you confirm Andrew?

  20. Andrew Misplon Staff 5 years, 11 months ago

    Super, thanks for the update. Nicely done. All seems to be working normally on my end.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread