youtube video in detail view

[Marcelo Vitoria]

Even adjusting the size of the video to be displayed in the detail view, the size of the video does not change. Does anyone know how to get around this problem?





Is it possible to change the size manually?

[Marcelo Vitoria]

Does anyone have this problem with the size of the YouTube video?

[jsetzer]

I am not using YouTube links in my projects. But as there hasn't been any help from others for a while, I have taken the time and added a YouTube-video-link field to one of my tables.

Configuration

AppGini_x13FE1CsAZ.png (18.86 KiB) Viewed 3099 times

First of all, there are different meanings of "video size". So just for clarification:

1. The size of the video (for example 5MB)?
2. The display size of the thumbnail in Table View rows
3. The display size of the thumbnail in Detail View

1. Video size
As AppGini only stores a link to a video, stored in YouTube, I think we cannot adjust the video-size. Only the creator can by uploading a reduced video.


2. Table View
In my test it works as expected. Thumbnail configures as 80x80. AppGini resizes the thumbnail, keeping the aspect ration. The resulting image is 80x60.

chrome_HCZNqDZtL4.png (17.12 KiB) Viewed 3099 times

3. Detail View

Now it becomes a bit more complicated: In TABLENAME_dml.php file the template-placeholder <%%YOUTUBE(FIELDNAME)%%> gets replaced, calling the function get_embed. Here we still have the correct size-settings, given in field-configuration. The placeholder gets replaced by the return value of get_embed('youtube', $urow['video'], '480', '360'). I've just tested that function call. It returns a complete <iframe .../>-tag including width/height dimensions. Those dimensions do NOT match with our given configuration:

chrome_Yx3yYTuBq8.png (5.89 KiB) Viewed 3099 times

To me, it looks like YouTube automatically returns these dimensions no matter what we pass. But honestly, I don't know much about it. So I manually ran the request that AppGini makes to YouTube:

Code: Select all

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=JRbHMSrK-bw&ab_channel=DreamTheater&maxwidth=480&maxheight=360

chrome_ucfUHVXVCh.png (25.76 KiB) Viewed 3099 times

And also here (which represents the HTML code to be rendered):

chrome_ym9PzlJTf8.png (7.83 KiB) Viewed 3099 times

In browser, the JSON response looks quite good. So, why don't we get those dimensions in our final <iframe> HTML code afterwards?

More testing required. I've noticed, when requesting from youtube in the browser (address-bar) the returned JSON looks correct. But when testing the request in code, I receive different size:

I've extracted fragments of actual code for simulatinh AppGini's request and for narrowing down the problem:

Code: Select all

<!-- file: hooks/footer-extras.php -->
<pre>
    <?php

    $urow = getRecord("instructions", 1);
    $url = $urow["video"];
    $provider = "youtube";
    $providers = [
        'youtube' => ['oembed' => 'https://www.youtube.com/oembed?'],
    ];
    $max_width = 480;
    $max_height = 360;
    $oembed = $providers[$provider]['oembed'] . 'url=' . urlencode($url) . "&amp;maxwidth={$max_width}&amp;maxheight={$max_height}&amp;format=json";
    $data_json = request_cache($oembed, true);

    var_dump($data_json);
    
    ?>
</pre>

Code: Select all

    string(823) "{"title":"Dream Theater - Metropolis Pt.2 Encore (from Breaking The Fourth Wall)","author_name":"Dream Theater","author_url":"https://www.youtube.com/@dreamtheaterofficial","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/JRbHMSrK-bw/hqdefault.jpg","html":"\u003ciframe width=\u0022200\u0022 height=\u0022113\u0022 src=\u0022https://www.youtube.com/embed/JRbHMSrK-bw?feature=oembed\u0022 frameborder=\u00220\u0022 allow=\u0022accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\u0022 allowfullscreen title=\u0022Dream Theater - Metropolis Pt.2 Encore (from Breaking The Fourth Wall)\u0022\u003e\u003c/iframe\u003e"}"

Code: Select all

... "height":113,"width":200...

Those values are different from the given dimensions, but those match up with the final <iframe>-dimensions.

I cannot say why youtube returns the correct size when being called via browser-address-bar, but returns a different size when being called via code. It may have to do with HTTP Header information, passed from client to server, but, actually, I do not know in detail. I hope one of our AppGini Super Heroes will jump in and continue my work at this point.

It figured out, after some Googling, there are many developers out there, having similar problems. So it seems to be a common YouTube problem.

Gonna try out a few hacks the next hours.

[jsetzer]

OK, you can try with the following javascript-hack. It is intended for landscape orientation videos but can be adjusted to you needs.

Note: This is just a quick fix. I do not guarantee that it will work in all circumstances.

Before

chrome_KIH8YQm0Mx.png (57.98 KiB) Viewed 3097 times

Code

You can put it for example in hooks/TABLENAME-dv.js file or in any common file being loaded in your DV:

Code: Select all

function resizeYouTubeVideo(tablename, fieldname, width, height) {
        const iframe = jQuery(`[data-table='${tablename}'] label[for='${fieldname}']`).parent().find(`div > iframe[src^='https://www.youtube.com/embed']`);
        if (iframe.length == 1) {
            const parent = iframe.parent();
            parent.css("overflow","auto");
            const size = {
                width: iframe.attr("width"),
                height: iframe.attr("height")
            };
            size.ratio = size.width / size.height;
            if (size.width > size.height) {
                iframe.attr("width", width);
                iframe.attr("height", width / size.ratio);
            }
        }
    }

Usage

For example in hooks/TABLENAME-dv.js:

Parameters: TABLENAME, FIELDNAME, WIDTH, HEIGHT. Change those according to your needs.

Code: Select all

    resizeYouTubeVideo("instructions", "video", 800, 600);
    

After

chrome_u0ztM870bz.png (219.8 KiB) Viewed 3097 times

PS: A lot of time spent on research and coding for such a small YouTube bug
Hopefully it will help someone out there.

PPS: https://www.youtube.com/watch?v=JRbHMSr ... eamTheater

[Marcelo Vitoria]

Hello jsetzer

Thank you very much for your help, what I need is just to increase the size of the embedded video in the detail view, as it normally worked before.

And I agree with you, the forum has been a bit abandoned lately.

I will try to implement your suggestion

Thanks

[Marcelo Vitoria]

Hello Ahmad

Although it appears that the size of the YouTube video thumbnail was corrected "in some scenarios" in AppGini 23.16, when upgrading I found that it is the same, the app ignores the adjustments and makes a thumbnail of just one size.

Thanks again for jsetzer's help, but this adjustment was working in previous versions of AG and I prefer to wait for a solution.