After copying a template from CodePen, I realized that the code was outdated and contained some old CDN links. This meant that I had to update these links in order to make the app fully functional. The last piece of the puzzle is figuring out how to close the modal after it has been opened. I suspect that the solution lies within Bootstrap. You can find the updated code for the links and the modal below.
<head>
<title>Refugee Stories</title>
<link rel = "stylesheet" href = "index.css">
<meta name = "viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- jQuery Version 1.11.0 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- <link rel="stylesheet" href="index.css"> -->
<!-- Script -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35455a454550471b5f4675041b">[email protected]</a>/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</head>
...
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here..-->
<h2>Refugee Stories</h2>
<p class="item-intro text-muted">Html/Css/JavaScript</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>The Refugee Stories application allows users to read stories submitted by refugees. Admins have the ability to review, approve, or decline stories before they are published on the site. Users can submit their own stories for review as well. Both roles can view and read all stories available.</p>
<a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>