Forum

Thread tagged as: Problem, Addons, Runway

You Tube Video size

I am want to have a video at a set size as below but the actual video is coming out about half the size, how do I fix this?

 <perch:content id="video" type="youtube" label="YouTube URL" output="embed" width="854" height="480" />

Actual video size that is coming out on page.

 <iframe width="457" height="257" src="https://www.youtube.com/embed/iQWvc6qhTds" frameborder="0" allowfullscreen></iframe>
David Roberts

David Roberts 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you re-saved your content since changing the template?

Sort of fixed, but it's not 'centred' so it cuts off part of the video. If you safe at a specific size does it not automatically resize to fit?

See: https://www.dropbox.com/s/kud282zrx44fdsd/original.png?dl=0 (original version) https://www.dropbox.com/s/ac35mgqmtgwvg3t/site%20version.png?dl=0 (site version)

Drew McLellan

Drew McLellan 2638 points
Perch Support

If you specify a size, it uses that size. I think if you specify just one of the dimensions it'll try to scale it.

ok I will try that. thanks.

This is still not quite working as I want. I am using the following code:

 <perch:content id="video" type="youtube" height="390px" label="YouTube URL" title="The title of the video"  
 output="embed" />

but it does not size it to the size I set,e.g. 390px it goes to 525. Is there no way to keep it at 390px?

What I get in the html code is:

<iframe width="700px" height="525" src="https://www.youtube.com/embed/r9LelXa3U_I?" frameborder="0"    
 allowfullscreen=""></iframe>

which i can adjust using the developer tools

  <iframe width="700px" height="390" src="https://www.youtube.com/embed/r9LelXa3U_I?" frameborder="0" 
 allowfullscreen=""></iframe>
Drew McLellan

Drew McLellan 2638 points
Perch Support

The width and height attributes need to be integers - no px required!

still have the same problem when px removed.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Have you re-saved the content since changing the template?

Yes, I think I have fixed it through the CSS file .

Ok, I thought this was fixed but there is something strange going on with the size of the video. I use Cloudflare on the site and when I am working on it I put the status in Cloudflare under development mode from Active mode, so caching is disabled. When I do this the video size is correct and is how I want it to look. When I go back to Active mode the size is wrong (larger).

Are there any reasons why this may be happing?

Thanks.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Are you retrieving the cached version?

If I empty cache in the browser and purge cache on Cloudflare it stays the same.

Drew McLellan

Drew McLellan 2638 points
Perch Support

What leads you to believe this is a Perch issue rather than an external issue?

Because if you set the size as below, does it not take that size and output as such?

<perch:content id="video" type="youtube" width="700" height="390" label="YouTube URL" title="The title of the 
video" output="embed" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

I thought you were saying that it did work until you enabled Cloudflare - is that not the case?

It might be best to isolate the changes just to your dev environment to remove external factors from the equation. Too many elements are changing.

I thought you were saying that it did work until you enabled Cloudflare - is that not the case?

On Cloudfare you can switch it off so that it is not caching the site (development mode) when you do this it reverts to the size that I want and when you revert back to Active mode on Cloudflare it reverts back to the larger size.

It is a live site and there is no dev environment as it was done buy somebody else and I have just changed the layout of some parts and updated some parts.

Drew McLellan

Drew McLellan 2638 points
Perch Support

That sounds very much like the varying factor is Cloudflare and not Perch.

Ok I will contact them.

thanks