Jump to content

Background Video Audio

Go to solution Solved by dmarquez,

Recommended Posts

Site URL: https://virginsuncare.com

 

I am trying to get my background video to play with sound on Squarespace Version 7.1. Is there any code to interject somewhere that will allow this? The sounds comes through perfectly when using just a Video Block but it doesn't come through at all when embedding the video into the background. 

I would really appreciate any guidance here. 

 

Thank you!

 

Edited by brigidc.campbell
Link to comment
  • 3 weeks later...
  • 5 weeks later...
  • 3 weeks later...
  • 4 weeks later...

@HRawson Thank you so much! I actually ended up putting in an animated .gif and a separate audio file, then hid the audio file.  I put this code in my .css to make it happen. 

// hide audio player on mobile //
@media only screen and (max-width: 640px) {   
player { display: none !important; }}
// hide audio player on desktop //
.audio-block.sqs-block-audio {
 display: none;
}

 

Link to comment
  • 4 weeks later...
On 5/24/2020 at 11:20 AM, HRawson said:

@TDavy Hi! Did you ever figure out how to get the audio from the SQSP Themes plugin to play automatically?

@dmarquez Might you know how to do this?

 

@brigidc.campbell Love your VIRGIN site and looks like you were able to get audio to play automatically on your landing page. Did you do this using the SQSP plugin that @dmarquez suggested?

Thanks all very much!

Hey @HRawson I did ! There was a little customise button in there. See how it turned out here: www.insideoutrealestatestyling.com.
How did you go?

Link to comment
On 2/12/2020 at 9:08 AM, brigidc.campbell said:

Site URL: https://virginsuncare.com

 

I am trying to get my background video to play with sound on Squarespace Version 7.1. Is there any code to interject somewhere that will allow this? The sounds comes through perfectly when using just a Video Block but it doesn't come through at all when embedding the video into the background. 

I would really appreciate any guidance here. 

 

Thank you!

 

 

On 5/25/2020 at 5:39 AM, brigidc.campbell said:

@HRawson Thank you so much! I actually ended up putting in an animated .gif and a separate audio file, then hid the audio file.  I put this code in my .css to make it happen. 

// hide audio player on mobile //
@media only screen and (max-width: 640px) {   
player { display: none !important; }}
// hide audio player on desktop //
.audio-block.sqs-block-audio {
 display: none;
}

 

Hey

 

On 3/2/2020 at 9:48 AM, norsedesignstudio said:

Hi,

I'm looking to do the same thing! Did you get it working?

Yes, I did! There was a little button in there with the customisation to play automatically.

Link to comment
On 2/12/2020 at 9:08 AM, brigidc.campbell said:

Site URL: https://virginsuncare.com

 

I am trying to get my background video to play with sound on Squarespace Version 7.1. Is there any code to interject somewhere that will allow this? The sounds comes through perfectly when using just a Video Block but it doesn't come through at all when embedding the video into the background. 

I would really appreciate any guidance here. 

 

Thank you!

 

Hey @brigid.camp

 

On 5/25/2020 at 5:39 AM, brigidc.campbell said:

@HRawson Thank you so much! I actually ended up putting in an animated .gif and a separate audio file, then hid the audio file.  I put this code in my .css to make it happen. 

// hide audio player on mobile //
@media only screen and (max-width: 640px) {   
player { display: none !important; }}
// hide audio player on desktop //
.audio-block.sqs-block-audio {
 display: none;
}

 

@brigidc.campbell Glad you figured out. i haven't been on here for a few weeks. Have to say your site looks amazing! 

Link to comment
  • 4 months later...

Hello,

I'd like to create a landing page in 7.1 with a full-bleed looping video, and sound. I have the .mp4 video, and the audio file is on SoundCloud. Is it possible to have the looping video and the music both play automatically as soon as the visitor loads the page?

Could someone tell me the process step by step?

Also, is it possible to do this without SoundCloud, but with an .MP3 file?

Finally, is it easier to do in Squarespace 7.0?

Many thanks!

Link to comment
  • 2 weeks later...
  • 3 weeks later...
On 4/1/2020 at 5:31 AM, dmarquez said:

 

Hi, thank you for this plug in!! it works. I have questions, and I wonder if you could help me. 

I would like like everyone else to start the sound automatically with the video, I can't find any kind of costume buttons, also I would like to have an additional button with the option to put the video full screen. Is that possible. Thank you

Link to comment
On 6/22/2020 at 2:15 PM, TDavy said:

Hey @HRawson I did ! There was a little customise button in there. See how it turned out here: www.insideoutrealestatestyling.com.
How did you go?

Hi, thank you for this plug in!! it works. I have questions, and I wonder if you could help me. 

I would like like everyone else to start the sound automatically with the video, I can't find any kind of costume buttons, also I would like to have an additional button with the option to put the video full screen. Is that possible. Thank you

Link to comment
  • 2 months later...

Hi,

 

I have downloaded this plugin, but the instructions.html page I go to doesn't have the "only first" and "Unmute Video" options. I copied the extra code manually from the video and put in:

<!-- Plugin Background Video Controls -->
<link href="/s/plugin-background-video-controls.css" rel="stylesheet">
<script src="/s/plugin-background-video-controls.js"></script>
<script>pluginBackgroundVideoControls({"unmute":"true");</script>
<!-- end Plugin Background Video Controls -->

But now there are no control buttons on the video at all. I include a screen show of the instructions.html page I have, and the instructions on the setup video.

Can someone please advise how to correct this?

Thank you

Capture.JPG

Capture.JPG

Link to comment
On 3/4/2021 at 3:09 AM, lindsaycheril said:

Hi,

 

I have downloaded this plugin, but the instructions.html page I go to doesn't have the "only first" and "Unmute Video" options. I copied the extra code manually from the video and put in:

<!-- Plugin Background Video Controls -->
<link href="/s/plugin-background-video-controls.css" rel="stylesheet">
<script src="/s/plugin-background-video-controls.js"></script>
<script>pluginBackgroundVideoControls({"unmute":"true");</script>
<!-- end Plugin Background Video Controls -->

But now there are no control buttons on the video at all. I include a screen show of the instructions.html page I have, and the instructions on the setup video.

Can someone please advise how to correct this?

Thank you

Capture.JPG

Capture.JPG

Hi. Have you contacted sqspthemes yet? Their support is good

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 6/22/2020 at 10:15 PM, TDavy said:

Hey @HRawson I did ! There was a little customise button in there. See how it turned out here: www.insideoutrealestatestyling.com.
How did you go?

That's a great looking website! I noticed though that on mobile devices including my iPhone and iPad, the video doesn't load. Is this a limitation of the plugin? Does it only work on desktops?

Link to comment
  • 2 weeks later...
On 7/21/2021 at 8:57 PM, Flutes_Flutists said:

That's a great looking website! I noticed though that on mobile devices including my iPhone and iPad, the video doesn't load. Is this a limitation of the plugin? Does it only work on desktops?

Hi @HRawson, banner videos on squarespace don't play on mobile and tablet:( Ever.
It's not to do with the plugin I used.

Link to comment
4 hours ago, TDavy said:

Hi @HRawson, banner videos on squarespace don't play on mobile and tablet:( Ever.
It's not to do with the plugin I used.

Hi @TDavy, I've since discovered that if you use a Vimeo link, then the video does play on mobile devices. The Vimeo account needs to be a paid account though, but the basic Plus account is already enough.

Link to comment
  • 7 months later...
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.