Responsive Video Sizing

Site URL: https://www.thefabricant.com/

Hi,

I have a video on our home page as Code Injection atm. I would love to include a part in the code to make the video responsive to the size of the browser window. This is easy to do with the video block and Vimeo link, however I need to be able to do it with the Code Injection.

Below is the code I'm using now. 

<center>
<iframe src="https://player.vimeo.com/video/680815668??autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=2&portrait=0" width="1170" height= "600"  frameborder="0" allow="autoplay; fullscreen"allowfullscreen></iframe>
</center>

Here's the embed code I'm getting from Vimeo

<div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/680815668?h=b5fa6fda37&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="The Fabricant - Digital Fashion House"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

What do I need to change in the original code to get the responsiveness in it?

AND bonus question. Can I add text on top of the video?

use this new code

<center>
  <h3> Add text here </h3>
<iframe src="https://player.vimeo.com/video/680815668??autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=2&portrait=0" width="1170" height= "600"  frameborder="0" allow="autoplay; fullscreen"allowfullscreen></iframe>
</center>
<style>
  @media screen and (max-width:767px) {
  iframe[src*="vimeo"] {
    width: 100% !important;
    height: auto;
}
  }
</style>

Hello, This was very helpful to stop the bleed but now the height dimensions on my video for mobile are way too short. 

Is there a way to make both width and height responsive so the video stays proportionate?

20 hours ago, MikaylaNelson said:

Hello, This was very helpful to stop the bleed but now the height dimensions on my video for mobile are way too short. 

Is there a way to make both width and height responsive so the video stays proportionate?

You can change this line

Quote

 height: auto;

replace auto with px, eg: height: 250px;

Hi @tuanphan  we have a code snippet to embed a live-stream video on one of our website pages - please can you help with how to make the video size responsive for viewing on an ipad or mobile phone?  Thank you!

Here is the snippet we're using - which works well on desktop

<iframe 

width="1120"

height="630"

src="https://www.youtube.com/embed/............................................." title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

On 9/10/2024 at 7:25 PM, Khechog said:

Hi @tuanphan  we have a code snippet to embed a live-stream video on one of our website pages - please can you help with how to make the video size responsive for viewing on an ipad or mobile phone?  Thank you!

Here is the snippet we're using - which works well on desktop

<iframe 

width="1120"

height="630"

src="https://www.youtube.com/embed/............................................." title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Do you have link to page where you added it? We can check problem easier

Thank you @tuanphan  Here is the page www.meditateinthewestmidlands.co.uk/prayers-live