Embed Youtube Video not showing when using Angularjs expression link?

Question

         <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.

So if my {{video}} was set on the controller to '33Rs8Swa984'. it will print out Testing video link: youtube.com/embed/33Rs8Swa984 — Emenpy
– Emenpy, Commented Apr 17, 2018 at 19:22
Possible duplicate of How to change iframe src use angularjs — Simon
– Simon, Commented Apr 17, 2018 at 19:27

Simon · Accepted Answer · 2018-04-17 19:21:19Z

1

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

answered Apr 17, 2018 at 19:21

Simon

2,5384 gold badges36 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emenpy Over a year ago

@Pop-A-Stash {{video}} is a string that get pulled from controller. Its a youtube ID. for example, video can be '33Rs8Swa984'. I have changed to ng-src and it still won't work on my situation

Collectives™ on Stack Overflow

Embed Youtube Video not showing when using Angularjs expression link?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related