Module: Video embed for YouTube/Vimeo (TextformatterVideoEmbed)

[d'Hinnisdaël]

There's a list of valid urls on Vimeo's oEmbed docs page that seems to match the ones mentioned in the issue. It doesn't mention video ids now being hexadecimal, however.

vimeo.com/{video_id}
vimeo.com/album/{album_id}/video/{video_id}
vimeo.com/channels/{channel_id}/{video_id}
vimeo.com/groups/{group_id}/videos/{video_id}
vimeo.com/ondemand/{ondemand_id}/{video_id}

[netcarver]

@d'Hinnisdaël Thank you.

As an example with trailing hexadecimal video_id: https://vimeo.com/553329597/04c306a466

I've closed my PR for the time being.

[Robin S]

@netcarver, this information about unlisted videos may be relevant: https://help.vimeo.com/hc/en-us/articles/12426199699985-Overview-of-video-privacy-settings

Quote

When you change your video's privacy settings to Unlisted, an extra set of numbers - what we call the privacy hash - will be added at the end of your video's URL, and must be included for embeds and sharing to work. 

So for a video with a URL like https://vimeo.com/553329597/04c306a466 the src for the iframe embed will need to include h=04c306a466 in the query string.

 

[Ivan Gretsky]

It seems like aspect ration auto-determination doesn't work. Created an issue. Can anyone confirm the bug?

P.S. I started to doubt... Was it ever a feature? I was sure it was...

[wbmnfktr]

I know I used this module a while back but moved on and used custom HannaCodes for video embeds for several reasons.

Maybe this could be your way as well - combined with HannaCodeDialog to insert the code into your textarea fields.

[Ivan Gretsky]

Sounds interesting! Can you share the hannacode?

But I still need this module as I have projects with may too much content to fix)

[d'Hinnisdaël]

I've created a fork of the previous version a while ago that adds support for aspect ratios. Been working great for years, and haven't seen a need to update to the newer version. Here's the fork and the git diff in case you're still on v1. The newer v2 seems to be a complete rewrite, so...

[wbmnfktr]

5 hours ago, Ivan Gretsky said:

Can you share the hannacode?

$out = '';
$out .= <<<EOT
<div class="player youtube">
    <iframe 
        src="" 
        data-src="https://www.youtube-nocookie.com/embed/$video"
        data-category="external_media"
        data-ask-consent="1" 
        frameborder="0"
        scrolling="no"
        width="640"
        height="480"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="link youtube">
    <a href="https://www.youtube.com/watch?v=$video" rel="nofollow" target="_blank">Watch on YouTube.com</a>
</div>
EOT;


echo $out;

This already has PrivacyWire attributes to make it work with it.

Here is the HannaCode export:

!HannaCode:youtube:eyJuYW1lIjoieW91dHViZSIsInR5cGUiOiI2IiwiY29kZSI6IlwvKmhjX2F0dHJcbnZpZGVvPVwiSHNEamxrZGpMZHdcIlxuaGNfYXR0cipcL1xuJG91dCA9ICcnO1xuJG91dCAuPSA8PDxFT1RcbjxkaXYgY2xhc3M9XCJwbGF5ZXIgeW91dHViZVwiPlxuICAgIDxpZnJhbWUgXG4gICAgICAgIHNyYz1cIlwiIFxuICAgICAgICBkYXRhLXNyYz1cImh0dHBzOlwvXC93d3cueW91dHViZS1ub2Nvb2tpZS5jb21cL2VtYmVkXC8kdmlkZW9cIlxuICAgICAgICBkYXRhLWNhdGVnb3J5PVwiZXh0ZXJuYWxfbWVkaWFcIlxuICAgICAgICBkYXRhLWFzay1jb25zZW50PVwiMVwiIFxuICAgICAgICBmcmFtZWJvcmRlcj1cIjBcIlxuICAgICAgICBzY3JvbGxpbmc9XCJub1wiXG4gICAgICAgIHdpZHRoPVwiNjQwXCJcbiAgICAgICAgaGVpZ2h0PVwiNDgwXCJcbiAgICAgICAgYWxsb3c9XCJhY2NlbGVyb21ldGVyOyBhdXRvcGxheTsgY2xpcGJvYXJkLXdyaXRlOyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlXCIgYWxsb3dmdWxsc2NyZWVuPjxcL2lmcmFtZT5cbjxcL2Rpdj5cbjxkaXYgY2xhc3M9XCJsaW5rIHlvdXR1YmVcIj5cbiAgICA8YSBocmVmPVwiaHR0cHM6XC9cL3d3dy55b3V0dWJlLmNvbVwvd2F0Y2g/dj0kdmlkZW9cIiByZWw9XCJub2ZvbGxvd1wiIHRhcmdldD1cIl9ibGFua1wiPkRpcmVrdCBiZWkgWW91VHViZSBhbnNjaGF1ZW48XC9hPlxuPFwvZGl2PlxuRU9UO1xuXG5cbmVjaG8gJG91dDsifQ==/!HannaCode

 

[PWaddict]

Adding the native lazy load loading='lazy' on the 381 line of TextformatterVideoEmbed.module doesn't seem to lazy load the iframe. I can see the attribute on the page's code that is injected but all the YouTube scripts are loading on the initial page load even through the embed video is about 2000+ pixels from top. What am I missing???

EDIT: All the Chromium browsers have a very large threshold. On Mozilla the threshold is much lower and the iframe gets loaded when you're getting close to it at about 500px.

[PWaddict]

@ryan will you consider to add an option to populate the loading="lazy" attribute to iframe tags?

Although with a simple hook like below we can get the job done but it would be great if we can have it available on the module.

$wire->addHookAfter('Page::render', function(HookEvent $event) {

    if ($this->wire('page')->template->name != "my-content") return;
    $event->return = str_replace("<iframe ", "<iframe loading='lazy' ", $event->return);

});

 

[Christophe]

Hello,

A few days ago I could add videos to a body field on pages using a basic-page-like template (file).
And the videos can still be seen now (in Vivaldi and Firefox Developer on Linux Mint Mate Edition).
But I've just tried now to add 2 different videos on 2 pages using the same template (file), and they are not displayed in Vivaldi or other chrome-based browsers, even though I see the embedded code with the web deveopment tools.
In Vivaldi I see this error message: "["name" from Parameters from the page where the video is]/:69 Unrecognized feature: 'web-share'."
But I can see them without any problem on Firefox Developer (even though I see other error messages that seem related to youtube "embed".

I cleared the cache in the module and not just one time (I changed from 720p to 1080p - and tried back with 720p -, and had tried the GDPR option).
I even erased the compiled files in Modules -> Site.
I cleared all the website's cache, and also the browser's cache, several times.

Any idea(s)?

Thanks in advance!

Edit: I don't see them anymore in Firefox.
Edit 2: I'm investigating, something in the css is apparently causing a problem and hiding the videos. If I deactivate position: relative; in element.style {} on .TextformatterVideoEmbed the video appears full width on the whole website (covering a big part of the top part of the website).
Edit 3: it appears that if I add some "Lorem Ipsum" text paragraph(s) above and/or under the video code/url, the video is displayed well. So I'm going to keep investigating.
Edit 4: I tested on another page where the videos are displayed. It seems that it is taking the width of the element closest to it, so if there is nothing, nothing is seen, and if there is some narrow content, the videos are tiny. I guess I have to add some css to .TextformatterVideoEmbed and/or the iframe. I never had this issue before, perhaps it's because of the way I code this time.
Edit 5: .TextformatterVideoEmbed {width: 100vh;} or .TextformatterVideoEmbed {min-width: 100vh;} does the trick for me.
I'm using a lot of CSS Grid (and a little bit of Flexbox, but it is not used in this case here), so I don't know if it's related, or not at all.
Edit 6: it's not responsive, I have to lower the vh when the window is too narrow with at least one media query so that there is no horizontal scrollbar, or find another fix or complementary rule.
At one point I'm perhaps going to erase this whole post... it's becoming a "mess" or too big.

Edit 7: width: 100vh; causes the video to be larger than it should...

Edited 44 minutes ago by Christophe
Update 7