Home>Support>Background video on mobile

Background video on mobile

By LiSkynd, 4 years ago. Last reply by Andrew Misplon, 4 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi LiSkynd

    Thanks for reaching out.

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

  2. 4 years, 6 months ago LiSkynd

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

  3. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

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

  8. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

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

  12. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for the update.

    Sounds good. Hopefully, the plugin author replies.

  14. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

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

  19. 4 years, 6 months ago LiSkynd

    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. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More