Flutter_widget_from_html: Twitter embeded posts does not render properly

[ahmadkhedr]

I have an issue with twitter embedded posts that it does not render properly in the app.

How the post looks like after rendering :

Full HTML code :
<p><span style=\"color: rgb(255, 0, 0);\">الوكيل الاخباري</span></p><p>&nbsp;</p><p>يترقب عشاق النجمة العالمية أنجلينا جولي، عرض الجزء الثاني من فيلم \"مالفيسينت\"، الذي تم عرض أول أجزائه عام 2014.</p><p><br>وذكرت الصفحة الرسمية لاستوديوهات والت ديزني، على موقع التواصل الاجتماعي \"تويتر\"، أن عرض الفيلم، سيتم في يوم 18 أكتوبر/ تشرين الأول المقبل.&nbsp;</p><p><br>ونشرت الصفحة فيديو جديدا، يرصد تحضيرات الممثلة العالمية أنجلينا جولي لشخصية \"مالفيسينت\"، خلال الجزء الثاني من الفيلم الذي يحمل اسم \"مالفيسينت ميستريس أوف إيفل\".</p><p>&nbsp;</p><p>ويرصد الفيديو تحول أنجلينا جولي إلى الشخصية الشريرة من خلال تغيير بعض ملامح وجهها، في الجزء الثاني من الفيلم، الذي شاركت في الجزء الأول منه عام 2014.&nbsp;</p><p><br>ويشارك عدد كبير من نجوم هوليوود، مع الفنانة العالمية أنجلينا جولي، في الجزء الثاني من الفيلم، وأبرزهم آيلي فانينج وشويتال أجيوفور وجونو تامبل وتيريزا ماهوني وهاريس ديكنسون.</p><p><br>ومن المقرر طرح الفيلم في دور العديد من دور العرض العالمية، كما نشر الحساب بعض من الصور لأنجلينا جولي في أثناء إزالة ماكياج الشخصية.</p><p>&nbsp;</p><p><blockquote class=\"twitter-tweet\" data-lang=\"en\"><div lang=\"en\" dir=\"ltr\">She’s back in black! Go behind the horns as Angelina Jolie transforms into <a href=\"https://twitter.com/hashtag/Maleficent?src=hash&amp;ref_src=twsrc%5Etfw\">#Maleficent</a>: Mistress of Evil. See the film in theaters October 18! <a href=\"https://t.co/9IcFONTvk2\">pic.twitter.com/9IcFONTvk2</a></div>— Walt Disney Studios (@DisneyStudios) <a href=\"https://twitter.com/DisneyStudios/status/1171604522797543425?ref_src=twsrc%5Etfw\">September 11, 2019</a></blockquote>\n<script async=\"\" src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script></p><p>&nbsp;</p><p>المصدر:<a href=\"https://arabic.sputniknews.com/mosaic/201909121042861998-%25D9%2581%25D9%258A%25D8%25AF%25D9%258A%25D9%2588-%25D9%2585%25D8%25B1%25D8%25B9%25D8%25A8-%25D9%2584%25D8%25AA%25D8%25AD%25D9%2588%25D9%2584-%25D8%25A3%25D9%2586%25D8%25AC%25D9%2584%25D9%258A%25D9%2586%25D8%25A7-%25D8%25AC%25D9%2588%25D9%2584%25D9%258A-%25D9%2581%25D9%258A-%25D9%2581%25D9%258A%25D9%2584%25D9%2585-%25D9%2585%25D8%25A7%25D9%2584%25D9%2581%25D9%258A%25D8%25B3%25D9%258A%25D9%2586%25D8%25AA/\" target=\"_blank\"> عربي</a></p><p><customurllink><p class=\"hint-admin\" style=\"border: 1px solid #ccc; padding: 10px; font-size: 16px; text-align:center; color: #ccc;\">اظهار أخبار متعلقة</p></customurllink><br><customurllink><p class=\"hint-admin\" style=\"border: 1px solid #ccc; padding: 10px; font-size: 16px; text-align:center; color: #ccc;\">اظهار أخبار متعلقة</p></customurllink><br><customurllink><p class=\"hint-admin\" style=\"border: 1px solid #ccc; padding: 10px; font-size: 16px; text-align:center; color: #ccc;\">اظهار أخبار متعلقة</p></customurllink><br><customurllink><p class=\"hint-admin\" style=\"border: 1px solid #ccc; padding: 10px; font-size: 16px; text-align:center; color: #ccc;\">اظهار أخبار متعلقة</p></customurllink><br><customurllink><p class=\"hint-admin\" style=\"border: 1px solid #ccc; padding: 10px; font-size: 16px; text-align:center; color: #ccc;\">اظهار أخبار متعلقة</p></customurllink><br></p>"

[daohoangson]

Hah, it's the same root cause as in #23. The fix is similar too, just add <script async src="https://platform.twitter.com/widgets.js"></script> to the boilerplate code.

Full working example: https://gist.github.com/daohoangson/9fa6ae66431048ee11f085edb50ffdcd

Screenshot:

[ahmadkhedr]

Hah, it's the same root cause as in #23. The fix is similar too, just add <script async src="https://platform.twitter.com/widgets.js"></script> to the boilerplate code.

It is rendering perfectly now...But Why the videos in the tweets do not play like the videos in Instagram posts...Does it relative to our plugin or to twitter terms?

[daohoangson]

Twitter video seems to work fine. What is not working?

On Sun, Sep 15, 2019, 3:46 AM ahmadkhedr [e-mail] wrote:

Hah, it's the same root cause as in #23
https://github.com/daohoangson/flutter_widget_from_html/issues/23. The
fix is similar too, just add to the boilerplate
code.

It is rendering perfectly now...But Why the videos in the tweets do not
play like the videos in Instagram posts...Does it relative to our plugin or
to twitter terms?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/daohoangson/flutter_widget_from_html/issues/72?email_source=notifications&email_token=AAB2N2HNQYZRZOJT24AVDKLQJVEUBA5CNFSM4IWQMB72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6XD2KY#issuecomment-531512619,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAB2N2CCAG3S3YQILPJEO5TQJVEUBANCNFSM4IWQMB7Q
.

[ahmadkhedr]

It renders fine like this :

when I click the play button it shows me this message :

After hitting "ok" it shows me a blank space and the video does not play :

[daohoangson]

Hmm, yeah. The video doesn't seem to work. It's weird.

[daohoangson]

Regarding Twitter video, I have figured it was a security feature from twitter.com. You need to use a special iframe api to bypass it, see the sample code here https://github.com/daohoangson/flutter_widget_from_html/issues/161#issuecomment-633203552.

If you still run into issue, please open a new issue. I'm closing this one.