Video Embed not Displaying on Mobile

Hello,

I have embedded multiple videos into my portfolio site, and none of the videos are displaying on mobile. Can you please help me figure out why?

Embed code:
<video autoplay="autoplay" loop="true" width=100%">
    <source src="https://static1.squarespace.com/static/634ef0e6992d00397b17f041/t/635afac74b4eb724d4e5bfed/1666906825131/mobilehome.webm"/>
  </video>

sarahwooddesign.com
PW: cleo

Thank you!

This line

Quote

<video autoplay="autoplay" loop="true" width=100%">

should be

<video autoplay loop width="100%">

Hi @tuanphan- thank you for your help.

I updated the line of code, but the videos are still appearing blank on mobile. Do you have any other suggestions?

On 1/10/2023 at 10:56 PM, sarahwood5 said:

Hi @tuanphan- thank you for your help.

I updated the line of code, but the videos are still appearing blank on mobile. Do you have any other suggestions?

Which page do you use video?

@tuanphan

Hey there,

I'm looking to make this video optimised to show as a square video on Desktop and Mobile and keep it relative  between screen sizes. 

This is the code:

<iframe src="https://www.veed.io/embed/7225b707-12d1-4fb5-9a15-c769bbc2695b?watermark=0&color=&sharing=0&title=0" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Website example – https://www.whwt.org.nz/journal/a-conversation-with-jo-cribb

Do you have any ideas? I'm looking to embed this into Squarespace code blocks


Thanks

 

On 5/7/2024 at 4:05 AM, Nick.Loubser said:

@tuanphan

Hey there,

I'm looking to make this video optimised to show as a square video on Desktop and Mobile and keep it relative  between screen sizes. 

This is the code:

<iframe src="https://www.veed.io/embed/7225b707-12d1-4fb5-9a15-c769bbc2695b?watermark=0&color=&sharing=0&title=0" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 

Website example – https://www.whwt.org.nz/journal/a-conversation-with-jo-cribb

 

Do you have any ideas? I'm looking to embed this into Squarespace code blocks


Thanks

 

I see video looks fine. What is problem here?

@tuanphan

I was looking to make the container Square 1:1 for both relative to mobile and desktop to avoid the black band at the top and bottom. 

So it looks like the attached image across all screen sizes. 

 

You can use this code to Custom CSS box

@media screen and (max-width:767px) {
iframe[src*="veed.io"] {
    height: 350px !important;
}
}