Add Javascript/Html into a WordPress

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');

Related Posts: