Responsive Video

Site URL: https://www.aireelography.ca

I have a video on our home page as Code Injection. it autoplays and loops fine on desktop

<center>
<video autoplay loop width=1280; height: auto >
  <source src="https://static1.squarespace.com/static/62aa4929c26e8132135830a4/t/62d806511b9c3c0b8dd2f62c/1658324572985/Home-web-page-intro.mp4"
    type="video/mp4"/>
</video>  
</center>

iPhone format is terrible (need to scroll and all other elements are pushed to left). I would like to modify the video so it displays on the mobile iPhone correctly in Portrait (I guess using Media query) and have it play only when user clicks start button (so no autoplay or loop). Desktop autoplay and loop should remain

Also adding text to video will help as well

thanks in advance

thank you that worked and its formatted on my iPhone now. Can you please get it to manually play with controls on the mobile device but autoplay loop on desktop?

11 hours ago, pilot_aireelography said:

thank you that worked and its formatted on my iPhone now. Can you please get it to manually play with controls on the mobile device but autoplay loop on desktop?

Because you added attribute: autoplay on the video tag, so no way to achieve this.

You can consider adding 2 videos, then we will show 1 on desktop, show another on mobile. What do you think?

sounds good thank you. Can you provide the code for that.

On 7/25/2022 at 8:07 PM, pilot_aireelography said:

sounds good thank you. Can you provide the code for that.

You need to add 2 video first 
Or when add video, change this line

Quote

<video autoplay loop width=1280; height: auto >

to

<video autoplay loop width=1280; height: auto class="video1">

and

<video autoplay loop width=1280; height: auto class="video2">

then add this to Design > Custom CSS

/* Show video1 on desktop */
@media screen and (min-width:992px) {
.video2 {
	display: none;
}
}
/* Show video2 on mobile */
@media screen and (max-width:991px) {
.video1 {
	display: none;
}
}

Hi thanks for your help but this didn't really work - I added the second video code as you suggested and the result on the;

1) desktop - large gap on the web site where the 2nd video should be and, (bad user experience)

2) mobile - it did not show the video at all 

I reverted back to the old code, right now the video play correctly on desktop and there is a picture only (formatted correctly) on mobile. I guess it the default first frame from of the video.

Are there any other options to keep desktop video the way it is and have a video on MOBILE that DOES NOT AUTOPLAY or LOOP but has controls to allow user to play if they wish.

If this can't be done, how can I display a customized poster.jpg for the video?

16 hours ago, pilot_aireelography said:

Hi thanks for your help but this didn't really work - I added the second video code as you suggested and the result on the;

1) desktop - large gap on the web site where the 2nd video should be and, (bad user experience)

2) mobile - it did not show the video at all 

I reverted back to the old code, right now the video play correctly on desktop and there is a picture only (formatted correctly) on mobile. I guess it the default first frame from of the video.

Are there any other options to keep desktop video the way it is and have a video on MOBILE that DOES NOT AUTOPLAY or LOOP but has controls to allow user to play if they wish.

If this can't be done, how can I display a customized poster.jpg for the video?

 

 

 

Can you share link to page where you added both?

there might have been a problem with my browser as the initial code your gave me is working now, autoplay and loop and correct formatting on mobile is working so I thank you for your help in this matter.

Hi @tuanphan

I also had issues when using the above code. I'm trying to display the first video on desktop, and the second on mobile. 

Here's the site: https://www.laidbaremusic.com/

Any help is much appreciated! Thanks

On 9/25/2022 at 8:03 AM, Adam9 said:

Hi @tuanphan

I also had issues when using the above code. I'm trying to display the first video on desktop, and the second on mobile. 

Here's the site: https://www.laidbaremusic.com/

Any help is much appreciated! Thanks

Add to Design > Custom CSS

/* hide second video on desktop */
@media screen and (min-width:768px) {
	[data-section-id="632fa6e0c02a616c30679c2c"] {
		display: none;
}
}
/* hide top video on mobile */
@media screen and (max-width:767px) {
	[data-section-id="632e31ccc338377ac00dcd43"] {
		display: none;
}
}

Amazing! Thanks very much.