Skip to main content
kineticcreative123
Inspiring
October 20, 2017
Answered

Video has disapeared!

  • October 20, 2017
  • 1 reply
  • 1485 views

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.

    This topic has been closed for replies.
    Correct answer kineticcreative123

    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>


    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

    1 reply

    Nancy OShea
    Community Expert
    Community Expert
    October 20, 2017

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

    Nancy O'Shea— Product User & Community Expert
    kineticcreative123
    Inspiring
    October 21, 2017

    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!!

    kineticcreative123
    Inspiring
    October 23, 2017

    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.


    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.