omftag.js

omftag.js

<script>
var category_id = {{OMF category id}};
var video_ids = {{OMF data}};
var videos = get_video_ids(video_ids, category_id).slice(0,4);

var row = div_with_class('row product-teaser-row');

for (var i=0, len=videos.length; i < len; i++) {
  var icon   = document.createElement('i'),
      img    = document.createElement('img'),
      button = document.createElement('button'),
      link   = document.createElement('a'),
      
      teaser_media_foreground = div_with_class('teaser-media-foreground'),
      teaser_media            = div_with_class('teaser-media product-teaser-media'),
      text_info               = div_with_class("text-info teaser-hover-underline text-truncate"),
      panel_body              = div_with_class('panel-body'),
      col_xs_3                = div_with_class('col-xs-6 col-sm-3');

  icon.setAttribute('class', 'icon icon-chevron-right');

  button.setAttribute('class', 'btn btn-info teaser-btn');
  button.innerHTML = 'Video ansehen';
  button.appendChild(icon);
  
  teaser_media_foreground.appendChild(button);
  
  img.setAttribute('src', 'https://img.youtube.com/vi/' + videos[i].id + '/mqdefault.jpg');
  img.setAttribute('class', 'teaser-media-background product-teaser-resize-image intro-ani-base fn-image-unveil');

  teaser_media.appendChild(img);
  teaser_media.appendChild(teaser_media_foreground);

  text_info.innerHTML = videos[i].company_name;

  panel_body.appendChild(teaser_media);
  panel_body.appendChild(text_info);

  link.setAttribute('class', 'panel panel-sm teaser');
  link.setAttribute('href', 'https://www.youtube.com/watch?v=' + videos[i].id);
  link.appendChild(panel_body);
  
  col_xs_3.appendChild(link);

  row.appendChild(col_xs_3);
}

var result_list = document.getElementsByClassName('product-teaser-row')[0].parentNode.childNodes;
result_list[0].parentNode.insertBefore(row, result_list[3] || result_list[result_list.length - 1]);

function div_with_class(classname) {
  div = document.createElement('div');
  div.setAttribute("class", classname);
  return div;
}

function get_video_ids(categories, category_id) {
	for (var i = 0; i < categories.length; i++) {
		if (categories[i].id === parseInt(category_id)) {
			return categories[i].video_ids
		}
	}
}
</script>