Angular 6+ oembed solution
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We get this html from our backend api.

You'll notice it has an code in it for the youtube video. We are looking for an angular 6+ demo that converts this oembed into something functional that will render as expected by an angular page. We have been hunting around for a bit and are coming up a bit empty on a client side angular solution so we thought we would try here.

awarded to ocanal

Crowdsource coding tasks.

2 Solutions

Winning solution

Here is a live example,

angular.module('myapp', ['ngSanitize'])
      .controller('foo',["$scope", "$sce", function($scope, $sce) {
          $ = '<h2 style="text-align:center;">&nbsp;</h2><figure class="media"><oembed url=""></oembed></figure><h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2><h3 style="text-align:center;">Welcome letter</h3><p style="text-align:right;">Dear Guest,</p><p style="text-align:right;">We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="">Bilancino Hotel</a>.</p><p style="text-align:right;">Please find below the full schedule of the event.</p><p>&nbsp;</p><figure class="table"><table><thead><tr><th colspan="2"><span class="text-big">Saturday, July 14</span></th></tr></thead><tbody><tr><td>9:30 AM - 11:30 AM</td><td><p><strong>Americano vs. Brewed</strong> - “know your coffee” with:&nbsp;</p><ul><li>Giulia Bianchi</li><li>Stefano Garau</li><li>Giuseppe Russo</li></ul></td></tr><tr><td>1:00 PM - 3:00 PM</td><td><p><strong>Pappardelle al pomodoro</strong> - live cooking</p><p>Incorporate the freshest ingredients&nbsp;<br>with Rita Fresco</p></td></tr><tr><td>5:00 PM - 8:00 PM</td><td><strong>Tuscan vineyards at a glance</strong> - wine-tasting&nbsp;<br>with Frederico Riscoli</td></tr></tbody></table></figure><blockquote><p>The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels of the region. All the sessions are lead by top chefs passionate about their profession. I would certainly recommend to save the date in your calendar for this one!</p><p>Angelina Calvino, food journalist</p></blockquote><p style="text-align:justify;">&nbsp;</p><p style="text-align:justify;">Please arrive at the <a href="">Bilancino Hotel</a> reception desk <mark class="marker-yellow">at least half an hour earlier</mark> to make sure that the registration process goes as smoothly as possible.</p><p style="text-align:justify;">We look forward to welcoming you to the event.</p><p style="text-align:justify;"><strong>Victoria Valc</strong></p><p style="text-align:justify;"><strong>Event Manager</strong></p><p style="text-align:justify;"><strong>Bilancino Hotel</strong></p><p>&nbsp;</p><figure class="image image-style-align-right"><img src=""><figcaption>test</figcaption></figure><figure class="image image-style-align-left"><img src=""><figcaption>test</figcaption></figure><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><figure class="image"><img src="" alt="test"></figure>';

        const regex = /<oembed.+?url="https?:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})"><\/oembed>/g;
        $ = $sce.trustAsHtml($, '<iframe width="560" height="315" src="$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'));

    angular.bootstrap(document, ['myapp']);`


Here is a live application, using ngx-embed-video library, doing it the right way:



hey there , we tried this originally and is where we decided to stop. it was unable to grab the inner html since its passed and [innerHTML] can't have another [innerHTML] within own - but thanks for the submission on this!
Qdev 1 year ago
View Timeline