Removing a jQuery function on smaller screen sizes - html

Question

Using jQuery i created a show/hide function with mouseover and mouseout which is also a link. The initial stage shows a description of the video link. When the nouse enters the description disappears and the word play appears. This works great for larger screens but not for touch devices. How can I remove this function so only the initial descripton is shown and remains a link. I haven't been coding long so I may have over complicated the code. All help appreciated:)
Paul
Heres a link to the site. This issue is regarding the first page.
https://paulevans-dop.com/
HTML
<div class="video_container1">
<section class="content1">
<video id="player1" class="vidSlider" autoplay muted playsinline loop>
<source src="showcase/showcase1.mov" type="video/mp4">
</video>
<a href="promo_player1_index.html"><ul class="vidNavigation" id="film1_card">
<li id="tag1a"><h1 id="title1">GHOST</h1><span class="videoFont"
id="description1">Director:
Amanda Demme. Lomo Vista Recordings</span></li>
<li id="tag1b"><h1 id="playbutton1">PLAY</h1></li>
</ul></a>
</section>
</div>
jQuery
// Showcase 1 TITLE
$(document).ready(function(){
$("#playbutton1").hide();
$("#film1_card").mouseover(function(){
$("#playbutton1").show();
});
$('#film1_card').mouseover(function () {
$('#title1').hide();
});
$("#film1_card").mouseout(function(){
if ($('#film1_card').is(':hover')) {
$('#playbutton1').show();
($('#film1_card').is(':hover'))
$('#playbutton1').hide();
} else {
$('#title1').show();
$('#playbutton1').hide();
}
});
$('#playbutton1').mouseout(function () {
$('#playbutton1').hide();
});
$("#playbutton1").mouseout(function(){
$("#title1").show();
});
});
// Showcase 1 DESCRIPTION
$(document).ready(function(){
$("#playbutton1").hide();
$("#film1_card").mouseover(function(){
$("#playbutton1").show();
});
$('#film1_card').mouseover(function () {
$('#description1').hide();
});
$("#film1_card").mouseout(function(){
if ($('#film1_card').is(':hover')) {
$('#playbutton1').show();
($('#film1_card').is(':hover'))
$('#playbutton1').hide();
} else {
$('#description1').show();
$('#playbutton1').hide();
}
});
$('#playbutton1').mouseout(function () {
$('#playbutton1').hide();
});
$("#playbutton1").mouseout(function(){
$("#title1").show();
});
});