Video post format

Hi there, looking at your site, and also testing RYU on my test site with a Youtube video and video format, the issue is within the iframe code provided by Youtube. It has a height setting of 738. When I insert an Youtube in my test site with RYU, the embed code gives a height of 315, so I’m not sure where the 738 height is coming from. Did you edit the heights and widths in the embed code?

You might try editing the embed code and change the height to 554 since your videos are showing 984 for a width I figured our the ratio increase in width from the standard embeds from you tube and applied that to get the 554 height increase to keep the proportions closer. It’s still not perfect, but it is better.

@sacredpath
Hi, I’ve removed the video url and pasted instead the following shortcode:
[embed width="984" height="554"]https://youtu.be/8SzFaEqbLRM[/embed]

As a result, now the video does not fill the width of the content and still has the reported issued on mobile devices.

I will keep the post with that embed shortcode so you can check it out. The URL for the post is: https://arenasdeltiempo.com/en-algun-lugar-alla-afuera/

Thanks a lot for your quick reply
I pray and look foeward to get this nag fixed
Regards EGA

Hmmm, I see there is an issue at Youtube right now as the video (and others I checked elsewhere) are all returning a 500 server error.

Do you have the Jetpack Plugin installed and connected by chance? You might want to try using the Jetpack shortcode to insert the video. It would be like this:

[youtube https://www.youtube.com/watch?v=WVbQ-oro7FQ]

Of course, even the above won’t work until Youtube gets there stuff straightened out.

@sacredpath – Tried the shortcode you’ve provided and it didn’t work.
Regards EGA

Ok, I can get it full width using the JP video shortcode without having to set a width and height, as long as I set it to a Video post type, but it is still coming up very tall on mobile when I view it. I’m checking with our theme developers on this now. I’m thinking that Youtube changed something as I’ve not noticed this before.

Well, that was fast. See this article on making videos responsive. You will have to remove the height and width from the iframe code and then wrap it in a div and add the bit of CSS for that div’s CSS class. You will also have to add a CSS class to the iframe too and then just copy/paste the two CSS rules in that article into your Additional CSS at Customize. I tested it on my site and it worked well for me.

Example of post code:

<div class="resp-container"><iframe class="resp-iframe" src="https://www.youtube.com/embed/VV1XWJN3nJo" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

The two CSS rules:

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

• This reply was modified 6 years, 8 months ago by sacredpath.