CODEWITHSUNDEEP
htmlangularjs
Emenpy
Emenpy

Reputation: 143

Embed Youtube Video not showing when using Angularjs expression link?

         <div class="small-12 medium-6 large-4 columns" ng-if="video">
            Testing video link: https://www.youtube.com/embed/{{video}}
                <div class="h_iframe">
                    <iframe width="854" height="480" src="https://www.youtube.com/embed/{{video}}?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
        </div>

I cannot display the embed youtube video on my webpage? I was able to display the Testing video link with valid URL.

In the iframe, my video does not show up. But if I change my src code ('"https://www.youtube.com/embed/{{video}}?rel=0"') to a direct link without the expression, it works. How do i get this to work with using angularjs express?

EDIT: Made some changes from Jane.

<div class="small-12 medium-6 large-4 columns" ng-if="video">
                Testing video link: https://www.youtube.com/embed/{{video}}
                    <div class="h_iframe">
                        <iframe width="854" height="480" ng- src="https://www.youtube.com/embed/{{video}}?rel=0" frameborder="0" allowfullscreen></iframe>
                    </div>
            </div>

Changed from src to ng-src. Now the problem: my Testing video link: https://www.youtube.com/embed/{{video}} doesn't show up. My video doesnt show up.

SOLVED: A linked from Jane in comment has lead to the solution. Thanks.

Upvotes: 0

Views: 1343

Answers (1)

Simon
Simon

Reputation: 2538

The problem is that you are doing a src instead of an ng-src since you are trying to input some angular into the src..

This should work for you, I think:

<iframe width="854" height="480" ng-src="https://www.youtube.com/embed/{{video}}?rel=0" frameborder="0" allowfullscreen></iframe>

You can read more about ng-src here: https://docs.angularjs.org/api/ng/directive/ngSrc

Upvotes: 1

Related Questions