HTML, CSS, JS not running

Question

I'm new to html, css, and js and have been following along with codecademy. I just created my files for the first time and am trying to follow this https://jsfiddle.net/svArtist/9ewogtwL/ example to try and get a video with an overlay of play/pause. I can't get the video to play with the codes below, not sure what I'm doing wrong or missing. This is exactly how my codes are written in each file. My guess is that either my html or js is not written properly?

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <div class="wrapper">
        <video class="video">
            <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
        </video>
        <div class="playpause"></div> 
   </div>

</body>
</html>

scripts.js

$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
    $(this).children(".video").get(0).play();
    $(this).children(".playpause").fadeOut();
}else{
   $(this).children(".video").get(0).pause();
    $(this).children(".playpause").fadeIn();
}
});

mystyle.css

.video {
width: 100%;
border: 1px solid black;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
background-repeat:no-repeat;
width:50%;
height:50%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}

Can you press F12 on your browser and check the console for errors? — Tim Biegeleisen
– Tim Biegeleisen, Commented May 25, 2018 at 23:59
@VladimirM I haven't included the jQuery library... I didn't see it included in the example I was following, didn't know I had to put that in too. Where would it go? — Pam
– Pam, Commented May 26, 2018 at 0:02
check the following link for how to include it: w3schools.com/jquery/jquery_get_started.asp — Vladimir M
– Vladimir M, Commented May 26, 2018 at 0:05
You don't see JavaScript + jQuery 2.1.3 in the corner of the Javascript section of the fiddle? — Barmar
– Barmar, Commented May 26, 2018 at 0:05

Pankaj Nelson Tirkey · Accepted Answer · 2018-05-26 00:07:19Z

1

Your script.js contains JQuery code and not vanilla JS. You need to link to the JQuery library which is required for the code to function.

Try adding a CDN source to your head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

See below link for reference.

https://www.w3schools.com/jquery/jquery_get_started.asp

answered May 26, 2018 at 0:07

Pankaj Nelson Tirkey

261 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML, CSS, JS not running

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related