Web App Detail Page Conditional Logic

I am using a javascript conditional statement to display an IMAGE or VIDEO on the detail page of my web app.

The conditional statement is only partially working though.

If the web app field {tag_detailpage_image_or_video} contains "video", then it works perfectly, it only shows a video.

But, if the field {tag_detailpage_image_or_video}  contains "image' it shows BOTH an image(marqueeStripe output) and video(videoStripe output)  on the detail page.

{tag_detailpage_image_or_video} has two possible options (Image, Video)

The following is the code that appears on my detail page of my webapp:

<!--- Image or Video: begin --->

<!--- display_image: BEGIN --->

<section id="marqueeStripe">

<div class="bg{tag_sections}" id="marquee">
<header>
<section class="byline">
<a class="tag tag{tag_sections}" href="/categories/arts-and-culture">{tag_section_plates}</a>
BY {tag_author}
<span class="date-fix_date-time">{tag_post_date}</span>
</section>
<h1 class="headerTitle">{tag_post_title}={tag_detailpage_image_or_video}</h1>
</header>
<!--- DetailpageHeaderImage begin --->
<div id="headerImage">
<span></span><img src="{tag_post_image_value}" alt="{tag_name_nolink}" />
</div>
<!--- DetailpageHeaderImage end --->
</div>
<section class="stripeBorder bg{tag_sections}"></section>

</section>

<!--- display_image: END--->

<!--- display_video: BEGIN --->
<section id="videoStripe">

<div class="cw">
    <div id="marquee" class="cf cat{tag_sections}">

      <div id="videoImageContainer">

        <header>
          <section class="byline">

            <a href="/{tag_sections}" class="tag tag{tag_sections}">{tag_section_plates}</a>

              BY {tag_author}
            <span class="date-fix_date-time">{tag_post_date}</span>
          </section>

          <h1 class="headerTitle">{tag_post_title}={tag_detailpage_image_or_video}</h1>
        </header>

        <div id="headerImage" class="bg{tag_sections}">
              <div class="videoPlay big">
                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="33px" viewBox="0 0 29 33">
  <path class="fill play" d="M28.709,16.575L0,33.15V0L28.709,16.575z"/>
</svg>
             </div>
            <span></span><img alt="{tag_name_nolink}" src="{tag_post_image_value}" />
        </div>

      </div>

      <div id="headerVideo">
        <div id="ytEmbediFrame"></div>

        <div class="mo"><div id="BCLcontainingBlock" data-youtube-embed="true">
  <div class="BCLvideoWrapper">
    <iframe width="100%" height="100%" src="{tag_detailpage_video_source}?rel=0&autohide=1&showinfo=0&wmode=transparent&version= 3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  </div>
</div></div>
      </div>

    </div>
  </div>

</section>

  <!--- display_video: END --->

<!--- Script for alternating between video and image: begin --->
<script>
     (function($) {
     var webAppMediaType = "{tag_detailpage_image_or_video}";
     var imageContainer = $("#marqueeStripe");
     var videoContainer = $("#videoStripe");
     if ( webAppMediaType === "image" )  videoContainer.hide(); imageContainer.show();
     if ( webAppMediaType === "video" ) imageContainer.hide(); videoContainer.show();
     })(jQuery);
</script>
<!--- Script for alternating between video and image: end --->

<!--- Image or Video: end --->