CODEWITHSUNDEEP
javascripthtmlcss
Pam
Pam

Reputation: 399

HTML, CSS, JS not running

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;
}

Upvotes: 0

Views: 68

Answers (1)

Pankaj Nelson Tirkey
Pankaj Nelson Tirkey

Reputation: 26

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

Upvotes: 1

Related Questions