padding-bottom with twitter embed

Resolved matthieulllrc
(@matthieulllrc)

5 years, 10 months ago

Hello

The plugin works very well with videos.

With twitter post embeds, the plugin also adds the padding-bottom: 56.25%; which cause a big white space under.

Any idea how to prevent this issue?

Regards.

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author cubecolour
(@numeeja)

5 years, 10 months ago

Can you provide a link to a page on your site showing the issue please?

Plugin Author cubecolour
(@numeeja)

5 years, 10 months ago

I have updated the plugin. In version 1.3.0 it only acts on YouTube embeds so twitter embeds will be ignored.

Support for other video embeds may be added in subsequent versions of the plugin if anyone requests for these to be added.

Thread Starter matthieulllrc
(@matthieulllrc)

5 years, 10 months ago

Hello

Of course.

Here it is: https://www.rcinet.ca/en/twitter-embed/

Notify me when you have had time to look at the page.
It will be deleted afterwards.

Thank you.

Thread Starter matthieulllrc
(@matthieulllrc)

5 years, 10 months ago

Hello

Thank you for the quick response and solution !

I see that you filter positively on youtube in the latest version.

Since Vimeo, TED and other video sources are also often used, may I suggest that you filter negatively on twitter ?

Regards.
Plugin Author cubecolour
(@numeeja)

5 years, 10 months ago
There is a long list of embeds that are possible. Several video embeds and a lot of non-video embeds:
https://ww.wp.xz.cn/support/article/embeds/#okay-so-what-sites-can-i-embed-from
The plan is to compile a list of the URLs used for each of the video embeds and add each of those to the plugin. I added Youtube first as that seems to be the most popular.
- This reply was modified 5 years, 10 months ago by cubecolour.
Thread Starter matthieulllrc
(@matthieulllrc)

5 years, 10 months ago

Hello

Why not filter out twitter?
It might be simpler.

You can replace the line #61, i.e.
if ( false !== strpos( $url, "://youtube.com") || false !== strpos( $url, "://youtu.be" ) || false !== strpos( $url, "://www.youtube.com") || false !== strpos( $url, "://www.youtu.be" ) ) {
by
if ( false === strpos( $url, '://twitter.com') && false === strpos( $url, '://www.twitter.com') ) {

I tested it and it works.
Note the “&&” in place of the “||” since it’s using reverse logic.
Thread Starter matthieulllrc
(@matthieulllrc)

5 years, 10 months ago
I read your message again and I see your point.

I guess it depends on the balance between embeds that work with your plugin and the ones that do not.
- This reply was modified 5 years, 10 months ago by matthieulllrc. Reason: missing "s"
Thread Starter matthieulllrc
(@matthieulllrc)

5 years, 10 months ago
Hello

I can confirm that both TED video embeds and Vimeo video embeds work with your plugin (the old version without the YT filter of course).

See this test page: https://www.rcinet.ca/en/test-embeds/

Their own iframe embeddings use variations on the same css trick the plugin is using:

TED
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://embed.ted.com/talks/tony_buffington_why_do_cats_act_so_weird" width="854" height="480" style="position:absolute;left:0;top:0;width:100%;height:100%" frameborder="0" scrolling="no" allowfullscreen></iframe></div>

VIMEO
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/241891603" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>

Regards.
- This reply was modified 5 years, 10 months ago by matthieulllrc. Reason: word misplaced