Add Javascript/Html into a WordPress

wordpress.stackexchange https://wordpress.stackexchange.com/questions/193067

  •  03-10-2020
  •  | 
  •  

Question

I have done this javascript in order to get email opt-in form when the video ends. What I am looking for now is to bring this code to a wordpress which I am not really familiar with the whole WP codex structure. Can someone help me out with this please.

   <!DOCTYPE html>
   <html>

  <head>      
 <style>

#overlayContactForm {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%;
 text-align:center;
 z-index: 1000;
  } 
    #overlayContactForm div {
     width: 428px;
    margin: 65px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    text-align: center;
    height: 200px;


   }

  </style>


  </head>
  <body>


 <div id="player"></div>
 <script src="http://www.youtube.com/player_api"></script>

 <div align="center">

 <script>

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'VhvUEhxL1DQ',
      playerVars: {rel: 0},
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {            


// $('#lightbox-panel').lightBox();


el = document.getElementById("overlayContactForm");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";


    }
}

 </script>
 </div>

 <div id="overlayContactForm">

  <div>
  <h1> Text Header Info </h1>
  <form class="form-inline">
 <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email 
   Address">
 <button type="submit" class="btn btn-default">Sign in</button>
 </form>
 <p> Testing email opt-in - Video/Form </p>
 </div>
 </div>


</body>
</html>
Was it helpful?

Solution

This plugin allows custom JS and custom CSS on a per post/page basis. https://wordpress.org/plugins/art-direction/

If you find that it is not compatible with your WP install, look for other plugins that allow custom JS and CSS.

If you're looking for a more robust solution, you can do something like the following:

/* overlay-contact-form.css */
#overlayContactForm {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
} 

#overlayContactForm div {
 width: 428px;
margin: 65px;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
height: 200px;
}


/* my-youtube.js */


// create youtube player
var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'VhvUEhxL1DQ',
        playerVars: {
            rel: 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
    if (event.data === 0) {


        // $('#lightbox-panel').lightBox();


        el = document.getElementById("overlayContactForm");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";


    }
}

/* functions.php */
/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style('style-name', get_stylesheet_uri(). '/css/overlay-contact-form.css');
    wp_enquue_script('youtube_api', 'http://www.youtube.com/player_api');
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri().'/js/my-youtube.js', array('jquery', 'youtube_api', '0.1.1', true) );
}

add_action('wp_enqueue_scripts', 'theme_name_scripts');
Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top