Video has disapeared!

[kineticcreative123]

Hi,

I have two landing page templates I'm building and I have seemed to mess up the video function. On the hero image I have a play video button the when clicked the hero image slides down and a video appears up top of the page. Nothing has changed on the youtube API script (I think) for I have double checked the code. I can't figure it out.

This one works:

http://offers.premierinc.com/DCWes.html

This one doesn't:

http://offers.premierinc.com/Capital-Analytics.html

Thanks for any help.

[Nancy OShea]

When I Inspect Elements in my browser, the working one contains a link and the non-working one doesn't.

[kineticcreative123]

Hi Nancy,

Thanks for your response. Can you take a screen shot or tell me where the link thats working is? The page with the button that works with the video dropdown also has another video next to the form. The one that isn't working has an image in it's place. Just want to make sure I'm looking at the right spot.

The video drop downs run off an API with a video ID.

Thanks for your help!!

[Nancy OShea]

Working page contains this code:

Line 21

<div class="video_drawer" id="videoDrawer">

   <div class="close" id="drawerClose">+</div>

   <div class="frame_wrapper">

   <div id="player"></div>

   </div>

   </div>

Line 117

<div class="row video">

   <div class="left_block video_placeholder" id="videoPlaceholder">

  <a href="#top"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_play.svg" alt="" class="play_button" id="placeHolderPlayButton"></a>

   <div class="overlay"></div>

   <video loop id="videoPH" class="videoPH">

   <source src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_PR_VideoLoop.mp4">

   <source src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_PR_VideoLoop.webmhd.webm">

   <source src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_PR_VideoLoop.oggtheora.ogv">

   </video>

   </div>

Line 167

<script>

  //load the IFrame Player API code asynchronously
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //will be youtube player references once API is loaded
  var player;

  function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: 'OuVj3tYLadw',
  playerVars: {
  controls: 0,
  showinfo: 0,
  rel: 0
  }
  });
  $('.frame_wrapper').fitVids();
  }
   </script>

========================

Non-working page:

Line 29

<div class="video_drawer" id="videoDrawer">

   <div class="close" id="drawerClose">+</div>

   <div class="frame_wrapper">

   <div id="player"></div>

   </div>

   </div>

Line 106 -- no links or video files

<div class="row video">

   <div class="left_block video_placeholder" id="videoPlaceholder">

   <div class="text_wrapper2">
   <p class="valign">Find out if you qualify for a FREE trial:</p><i class="fa fa-arrow-right" aria-hidden="true" style="color:#ffc627; font-size:4rem"></i></div>

   <video loop id="videoPH" class="videoPH">

   <source src="http://offers.premierinc.com/rs/381-NBB-525/images/CA_tablet.jpg">
   </video>

   </div>

Line 187

<script>

  //load the IFrame Player API code asynchronously
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //will be youtube player references once API is loaded
  var player;

  function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: 'OuVj3tYLadw',
  playerVars: {
  controls: 0,
  showinfo: 0,
  rel: 0
  }
  });
  $('.frame_wrapper').fitVids();
  }
   </script>

[kineticcreative123 · Accepted solution]

Hi Nancy!

I cloned the original template again and got the video to work. I found what code was causing the problem and if I remove it the video slide down function doesn't work. This is the code causing the problem. If any of it is removed the problem starts.

here is the new link:

dc advocacy - premier inc.

It's at the bottom above the youtube script.

<div class="row form">

        <div class="left_block" id="formBlock">

        </div>

        <div class="right_block law_background" id="influencingPolicy">

        </div>

Also the video drop down doesn't drop enough. There has to be a min-height issues or something but I couldn't find it.

Thanks again

[osgood_]

I'm afraid this template is not workable in any way shape or form. You only have to remove one <div> and it stops working.

For instance if you remove the section below from the page where the video DOES reveal itself when you click the button, then it doesn't anymore. Why, I have no idea but its simply not workable as a template because you would want to remove and add sections.

<div class="row form">

<div class="left_block" id="formBlock">

<div class="tile">

<h2><span class="yellow">RE</span> invent</h2>

<p>Value-Based Healthcare Successes</p>

<a href="http://offers.premierinc.com/rs/381-NBB-525/images/16389_PR_VbcSuccessStories-WithCover_FNL.pdf" target="_blank">Learn how value-based care models are working <img src="http://offers.premierinc.com/rs/381-NBB-525/images/16389_download.svg" alt=""></a>

</div>

<div class="quote_stack" id="quoteStack">

<p id="quoteHolder" class="quote_holder">Tennessee’s AnewCare Collaborative has saved Medicare $17.5M since 2012</p>

</div>

</div>

<div class="right_block law_background" id="influencingPolicy">

<h2>Influencing Policy</h2>

<p>American healthcare is the best in the world on many measures, but we still have work to do. We won’t be satisfied until we cut costs, improve quality and give you, your neighbors and loved ones a better chance at a healthier life.</p>

<p>Our campaign to transform healthcare together never stops.</p>

<p>There’s more to learn about our advocacy efforts to influence healthcare policy and our work with providers to ensure they succeed in value-based care.</p>

<a target="_blank" title="Send us an email." href="mailto:xxxxxxxxxxxxxxx@xxxxxxxxxx?subject=RE%3A%20Healthcare&body=I%20want%20to%20learn%20more%20about%20the%20movement%20to%20value-based%20care.">Contact Us to Learn More</a>

</div>

<div class="clear"></div>

</div>

[kineticcreative123]

Hi osgood!

I cloned the original template again and got the video to work. I found what code was causing the problem and if I remove it the video slide down function doesn't work. This is the code causing the problem. If any of it is removed the problem starts.

here is the new link:

dc advocacy - premier inc.

It's at the bottom above the youtube script.

<div class="row form">

        <div class="left_block" id="formBlock">

        </div>

        <div class="right_block law_background" id="influencingPolicy">

        </div>

Also the video drop down doesn't drop enough. There has to be a min-height issues or something but I couldn't find it.

Thanks again

[osgood_]

kineticcreative123  wrote

Hi osgood!

I cloned the original template again and got the video to work. I found what code was causing the problem and if I remove it the video slide down function doesn't work. This is the code causing the problem. If any of it is removed the problem starts.

here is the new link:

dc advocacy - premier inc.

It's at the bottom above the youtube script.

<div class="row form">

        <div class="left_block" id="formBlock">

        </div>

        <div class="right_block law_background" id="influencingPolicy">

        </div>

You're just confirming what I said in my post. If you remove that block of code then the page is 'disfunctional'. Why that should be I have no idea. That block of code must somehow be tied in with how the mechanics of the page works to reveal the video which sits underneath the hero image section.

I guess you could set its property to display: none; if you dont require it to be seen:

<div class="row form not_required">

.not_required {

display: none;

}

But that's a sticking plaster solution. I would really want to know why removing that block of code has the effect of stopping the page dropping down.

Have you asked whoever produced the template to explain the reasoning because in my opinion its stupid to produce a template where you cannot remove a section of the coding, which may not be required and doesnt seem on the outset to have anything to do with the page functioning correctly.

The video itself looks to be all viewable in my browser.

[kineticcreative123]

Hi There,

Thanks. Yes this template is a mess but I don't have the option for going back now... Made a work around and just deleted the class attributes in the css and left the div's in the html. Who cares at this point:)

On another note... The whole reason for deleting that garbage was to add a footer with logo and social links. I got it to work but can't get the footer to fill the width of the page 100%. Can you look into this? After adding this footer the project will be done:)

here is my latest.

dc advocacy - premier inc.

[kineticcreative123]

CORRECTION-

Actually I got it to render 100% But now I'm trying to float the social icons to the right and center them and the logo when responsive.