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.

https://gist.github.com/quotient/6bfbd36eed85e69ba5df66463d92e16c

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) {
          $scope.data = '<h2 style="text-align:center;">&nbsp;</h2><figure class="media"><oembed url="https://www.youtube.com/watch?v=BLJ4GKKaiXw"></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="https://ckeditor.com">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="https://ckeditor.com">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="http://brand.1851-dev.crts.io/uploads/editor/1559644732_about_img2.jpg"><figcaption>test</figcaption></figure><figure class="image image-style-align-left"><img src="http://brand.1851-dev.crts.io/uploads/editor/1559644739_about_img.jpg"><figcaption>test</figcaption></figure><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><figure class="image"><img src="http://brand.1851-dev.crts.io/uploads/editor/1559644807_1851-devices.png" alt="test"></figure>';

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

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

hi,

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

library: https://www.npmjs.com/package/ngx-embed-video

demo: https://stackblitz.com/edit/ngx-embed-video-example-qygx2l

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 5 months ago
View Timeline