Add script codes to WordPress

2 Views

I have the following code that I tried in W3 html editor:

The main goal:
(The code pretty much plays a mp4 video and allows the user to pause/play by clicking on the video screen – no controls are shown) It works fine in a html file.

Read More

I want to add this code to my WordPress website, but the <script> section doesn’t work. I went to the WordPress help section to try to incorporate Javascript into my website. Some of the instructions are not obvious to follow. I would really appreciate if somebody could give me a little step-by-step method to make this code below work in WordPress.

I’m using WordPress Version 4.3.1 

<!DOCTYPE html> 
<html> 
<body>
<! Within the WordPress text editor, there's no need for the <html> & <body> tags >

<video id="myVideo" width="320" height="176" autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<script type="text/javascript"> 

var vid = document.getElementById("myVideo"); 
var isPlaying = true;

vid.onclick = function playVid() {

    if (isPlaying == false){
       myVideo.play(); 
       isPlaying = true;}

    else if (isPlaying == true){
       myVideo.pause(); 
       isPlaying = false; }
} 
</script> 

<! Within the WordPress text editor, there's no need for the <html> & <body> tags >
</body> 
</html>
Post Views: 2

Related posts

3 comments

  1. var vid = document.getElementById("myVideo"); 

     if (isPlaying == false){
       myVideo.play(); 
       isPlaying = true;}

    else if (isPlaying == true){
       myVideo.pause(); 
       isPlaying = false; }

    your variable is vid and you are using myVideo to call play() and pause() which is an id

  2. Try putting your script inside of window.onload:

    window.onload = function() {
    var vid = document.getElementById("myVideo"); 
    var isPlaying = true;

    vid.onclick = function playVid() {

        if (isPlaying == false) {
           myVideo.play(); 
           isPlaying = true;
        }
        else if (isPlaying == true) {
           myVideo.pause(); 
           isPlaying = false;
       }
    } 
};

  3. thanks for your suggestions

    While I was waiting for replies, I have managed to make it work.

    If you are building a website using wordpress. You have the option to add a new page/ or post and in your dashboard you can edit it on visual mode or text(html) mode. At first I was running the <script> in that text with no success.

    What I did is that I went to the WordPress theme editor (Dashboard menu -> Appearance-> Editor and put my script directly in one of the template pages of my Theme – i.e. the php files that make up your site). I had to play around a little to figure what file does what, but in the end, I figured it out. I pasted my code and it was running fine.

    I don’t know what’s the deal with that wordpress text editor…

Comments are closed.