youtube video in detail view

Please report bugs and any annoyances here. Kindly include all possible details: steps to reproduce, expected result, actual result, screenshots, ... etc.
Post Reply
User avatar
Marcelo Vitoria
Veteran Member
Posts: 56
Joined: 2016-10-11 12:08

youtube video in detail view

Post by Marcelo Vitoria » 2023-09-13 00:17

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?

Image

Image

Is it possible to change the size manually?
Marcelo Vitoria
Coding since 1984 Basic Sinclair!
Clipper Summer´87 - Visual Foxpro - VB6
AppGini 24.10 - AdminLTE
https://www.workspace.inf.br

User avatar
Marcelo Vitoria
Veteran Member
Posts: 56
Joined: 2016-10-11 12:08

Re: youtube video in detail view

Post by Marcelo Vitoria » 2023-09-15 00:44

Does anyone have this problem with the size of the YouTube video?
Marcelo Vitoria
Coding since 1984 Basic Sinclair!
Clipper Summer´87 - Visual Foxpro - VB6
AppGini 24.10 - AdminLTE
https://www.workspace.inf.br

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1792
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: youtube video in detail view

Post by jsetzer » 2023-09-15 07:03

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
AppGini_x13FE1CsAZ.png (18.86 KiB) Viewed 2569 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
chrome_HCZNqDZtL4.png (17.12 KiB) Viewed 2569 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
chrome_Yx3yYTuBq8.png (5.89 KiB) Viewed 2569 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
chrome_ucfUHVXVCh.png (25.76 KiB) Viewed 2569 times
And also here (which represents the HTML code to be rendered):
chrome_ym9PzlJTf8.png
chrome_ym9PzlJTf8.png (7.83 KiB) Viewed 2569 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.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1792
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: youtube video in detail view

Post by jsetzer » 2023-09-15 07:40

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
chrome_KIH8YQm0Mx.png (57.98 KiB) Viewed 2567 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
chrome_u0ztM870bz.png (219.8 KiB) Viewed 2567 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 8-)
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
Marcelo Vitoria
Veteran Member
Posts: 56
Joined: 2016-10-11 12:08

Re: youtube video in detail view

Post by Marcelo Vitoria » 2023-09-15 19:50

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. :cry:

I will try to implement your suggestion

Thanks
Marcelo Vitoria
Coding since 1984 Basic Sinclair!
Clipper Summer´87 - Visual Foxpro - VB6
AppGini 24.10 - AdminLTE
https://www.workspace.inf.br

User avatar
Marcelo Vitoria
Veteran Member
Posts: 56
Joined: 2016-10-11 12:08

Re: youtube video in detail view

Post by Marcelo Vitoria » 2023-11-27 20:35

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.
Marcelo Vitoria
Coding since 1984 Basic Sinclair!
Clipper Summer´87 - Visual Foxpro - VB6
AppGini 24.10 - AdminLTE
https://www.workspace.inf.br

Post Reply