Ivan's fun Bag hoodsly iframe src swap

by iscrow

HTML

<div class="home-video-faq">
  <div data-content-type="html" data-appearance="default" data-element="main" data-decoded="true">
    <div>
      <div>
        <ul>
          <li><a id="faq_toggle1" href="#" data-vid="788300081">Introduction</a></li>
          <li><a id="faq_toggle2" href="#" data-vid="788302015">Lead Times</a></li>
          <li><a id="faq_toggle3" href="#" data-vid="790468950">What Our Hoods Are Made Out Of</a></li>
          <li><a href="#" data-vid="790469269">Measuring For Your Hood</a></li>
          <li><a href="#" data-vid="790466783">Using Your Own Insert</a></li>
          <li><a href="#" data-vid="790467695">Custom Heights</a></li>
          <li><a href="#" data-vid="788341609">Custom Paint Matches</a></li>
          <li><a href="#" data-vid="790468422">Missed Installation Date Fees</a></li>
          <li><a href="#" data-vid="790468031">Hood Replacement Process</a></li>
          <li><a href="#" data-vid="792021721">Trim Options</a></li>
        </ul>
      </div>
    </div>

    <div>
      <iframe id="faq_iframe" src="" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
    </div>

  </div>
</div>

CSS

.hide {
    display: none;
}

.ifb-active {
    color: red;
}
.SomeToggleClass, .SomeOtherToggleClass {
    width: 50%;
    float: left;
}

.SomeToggleClass {
    background-color: green;
}

.SomeOtherToggleClass {
    background-color: red;
}

.toggle3, .SomeInsideToggleClass {
    background-color: blue;
}

.SomeScrollTarget {
    background-color: pink;
}

JavaScript

// Usage example:
jQuery(document).ready(function ($) {
    
  // Here's how to swap iframe source on click
  
  $("[id^=faq_toggle]").each(function(){
  $(this).click(function(){
  	var vid_id = $(this).data('vid');
    var vid_url = 'https://player.vimeo.com/video/' + vid_id + '?autoplay=1';
    $('#faq_iframe').attr('src', vid_url);
  });
    console.log($("#content_" + this.id + ">iframe").attr('src'));
  });

});