background YouTube video is not playing on mobile and not full screen

Hi

On iPad and mobile devices our background YouTube video is not playing, whilst it does play on desktop browsers?

What is causing this please and what is the fix?

Also related to the above - how do I add a background image which could be shown before the YouTube video loads, as on slower connections there can be a delay.

Finally on desktop and tablet devices the video background shows full screen, however on a mobile device the video background/div is only showing as a third of the screen when it should be full screen as it shows in desktop/tablet.

This is the website
http://www.nptpsb.org.uk/

and this is the code snippet

Many thanks

<section id="slider" class="slider-parallax full-screen with-header swiper_wrapper clearfix">

		<div class="slider-parallax-inner">

			<div class="swiper-container swiper-parent">
				<div class="swiper-wrapper">
			
					<div class="swiper-slide dark">
						<div class="container clearfix">
							<div class="slider-caption slider-caption-center">
								<h1>
								<span class="text-rotater nocolor" data-separator="|" data-rotate="fadeIn" data-speed="3000">
									<span class="t-rotate t700 font-body opm-large-word">Croeso |i’r |  Talbot </span>
								</span>
							</h1>
						[ Lles](#)
							</div>
						</div>
				<div class="video-wrap">
                   <div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-start="38" data-stop="90" data-video="https://youtu.be/uxR9qNf9ePU" style="height: 100%;"></div>
                    <div class="video-overlay" style="background-color: rgba(0,0,0,0.2);"></div>
                </div>
					</div>
				
				</div>
	
			</div>
			
				[](#)

		</div>

	</section>