How do I embed an Aweber form at the end of a YouTube video

6 replies
  • WEB DESIGN
  • |
A few weeks ago I found a website selling a Wordpress plugin that would remove the navigation cutter from a YouTube video and allow me to embed a Mailchimp or Aweber sign-up form at the end of the video.

However, I didn't bookmark the page and despite many attempts can't find the site again.

Any ideas of where this plug-in, or something similar, might be located?
#aweber #embed #end #form #video #youtube
  • Profile picture of the author Enzo Reyn
    I`m interested too....


    anyone knows ?
    {{ DiscussionBoard.errors[7385097].message }}
  • Profile picture of the author Dennisknows
    The only way i know to put a subscriber form at the end of a video is with Easy Video Player...

    Here's a review I wrote on it
    Is Easy Video Player The Best Video Software For Websites & Blogs?
    Signature
    "May the optimism of your tomorrow fuel your drive for today"
    {{ DiscussionBoard.errors[7385134].message }}
    • Profile picture of the author Brandon Tanner
      This can be easily done for free, using the YouTube API and a little bit of Javascript. Here's a quick and dirty demo...

      Code:
      <html>
      
      <head>
          
          <script src="http://www.youtube.com/player_api"></script>
      
          <script>
          
              // Create the video player
              var player;
              function onYouTubePlayerAPIReady() {
                  player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: '2SoWNMNKNeM',
                    events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                    }
                  });
              }
      
              // Autoplay video
              function onPlayerReady(event) {
                  event.target.playVideo();
              }
      
              // When the video ends
              function onPlayerStateChange(event) {        
                  if(event.data === 0) {            
                      document.getElementById('player_wrapper').style.display = 'none';
                      document.getElementById('optin').style.display = 'inline';
                  }
              }
          
          </script>
          
      </head>
      
      <body>
      
          <!-- Video div -->
          <div id="player_wrapper" style="height: 350px; overflow: hidden;">
              <div id="player"></div>
          </div>
      
          <!-- Optin div -->
          <div id="optin" style="display: none;">
              <h1>(Optin code goes here)</h1>
          </div>
      
      </body>
      
      </html>
      The Javascript in the code above simply autoplays the video, then when the video ends, it hides the video div and shows the optin div.

      You'll need to change the part in red to the actual ID of the YouTube video. And of course put your optin code inside the "optin" div (the part in blue). To hide the video player controls, I set the height of the "player_wrapper" div to 40px less than the height of the actual video.

      Lots of other parameters you can set too, if need be...

      https://developers.google.com/youtube/js_api_reference
      Signature

      {{ DiscussionBoard.errors[7385743].message }}
  • Profile picture of the author Alex Singleton
    Thanks - LeadPlayer is exactly what I was looking for.
    {{ DiscussionBoard.errors[7386056].message }}

Trending Topics