CODEWITHSUNDEEP
javascriptangularjs
methuselah
methuselah

Reputation: 13216

ReferenceError: youtubeBgVideoStyle is not defined

I've created a directive that dynamically creates the CSS for a component on my page. Every time the page loads up, I get the error message ReferenceError: youtubeBgVideoStyle is not defined. What is the cause of this?

HTML

<div class="vc_video-bg vc_hidden-xs">
  <iframe class="inner" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/VMwLyWZDJ_4?playlist=VMwLyWZDJ_4&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&widgetid=1&mute=1" id="widget2" ng-style="youtubeBgVideoStyle()" resize></iframe>
</div>

Directive

angular.module('adsomaApp')
  .directive('resize', function () {
    return function (scope, $window) {
      var w = angular.element($window);
      scope.getWindowDimensions = function () {
        return {
          'h': w.height(),
          'w': w.width()
        };
      };
      scope.$watch(scope.getWindowDimensions, function (newValue) {
        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;

        scope.youtubeBgVideoStyle = function () {
          return {
            'max-width': '1000%', 
            'margin-left': '0px', 
            'width': newValue.w + 'px',
            'min-height': '100vh', 
            'height': newValue.h + 'px',
            'margin-bottom': '-50%'
          };
        };
      }, true);

      console.log(youtubeBgVideoStyle());

      w.bind('resize', function () {
        scope.$apply();
      });
    };
  });

Upvotes: 1

Views: 33

Answers (1)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

Well, the error is pretty straight-forward, you are doing: 

console.log(youtubeBgVideoStyle());

where it should be:

console.log(scope.youtubeBgVideoStyle());

Upvotes: 2

Related Questions