Changes

/tropic/about-us/video-test/

/tropic/about-us/video-test/

Video Test

Video Test

<h1>Title</h1>

<hr/>

<div class="clearfix"></div>

<ss:logic:include page="/tropic/design-elements/closing-div/" />

<div class="videoContain">

	<video  id="bgvid" playsinline autoplay muted loop>

	  <!-- 

	- Video needs to be muted, since Chrome 66+ will not autoplay video with sound.

	WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->

	<source src="/media/website_pages/tropic/about-us/video-test/learnfrench3.webm" type="video/webm">

	<source src="/media/website_pages/tropic/about-us/video-test/learnfrench2.mp4" type="video/mp4">

	

	</video>

	<div class="container margin-top40 margin-bottom40">

		<div class="row">

			<div class="col-xs-12 col-sm-6">

				<h1>

					<span style="background-color: #425893;">&nbsp;We Love <br/>

					&nbsp;French&nbsp;</span>

				</h1>

				<br/><p class="pause">Pause the video</p>

			</div>

			<div class="col-xs-12 col-sm-6">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non eros sodales, consequat turpis ut, posuere leo. Fusce porta nisi neque, ut aliquet ligula elementum vel. Sed tincidunt consectetur placerat. Pellentesque ac ornare lorem. Cras eros nibh, suscipit in lorem vel, venenatis tincidunt arcu. Nullam sit amet lectus felis. Aliquam erat volutpat. Aenean accumsan dictum volutpat. Donec tincidunt dui in ex finibus ullamcorper. Etiam eu felis nisi. Donec quam turpis, dignissim vitae maximus et, pharetra fermentum nisi. Nam fringilla turpis ut tortor consequat, tempor tincidunt eros vestibulum.

Sed pulvinar finibus sapien ut pharetra. Maecenas porta ullamcorper enim, ac vulputate nulla mattis ac. Nam vitae lectus a massa lacinia

consectetur. Etiam pulvinar interdum nunc sed lobortis. Curabitur at augue sit amet urna lobortis fermentum. Phasellus non facilisis

enim.&nbsp;

				</p>

			</div>

		</div>

	</div>

	<!--<div id="polina">

	<h1>Polina</h1>

	<p>filmed by Alexander Wagner 2011

	<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>

	<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>

	<button>Pause</button>

	</div> -->

</div>



<ss:logic:include page="/tropic/design-elements/opening-div/" />

<p class="clearboth">test</p>

<br />

<h1>Title</h1>

<hr/>

<div class="clearfix"></div>

<ss:logic:include page="/tropic/design-elements/closing-div/" />

<div class="videoContain">

	<video  id="bgvid" playsinline autoplay muted loop>

	  <!-- 

	- Video needs to be muted, since Chrome 66+ will not autoplay video with sound.

	WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->

	<source src="/media/website_pages/tropic/about-us/video-test/learnfrench3.webm" type="video/webm">

	<source src="/media/website_pages/tropic/about-us/video-test/learnfrench2.mp4" type="video/mp4">

	

	</video>

	<div class="container margin-top40 margin-bottom40">

		<div class="row">

			<div class="col-xs-12 col-sm-6">

				<h1>

					<span style="background-color: #425893;">&nbsp;We Love <br/>

					&nbsp;French&nbsp;</span>

				</h1>

				<br/><p class="pause">Pause the video</p>

			</div>

			<div class="col-xs-12 col-sm-6">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non eros sodales, consequat turpis ut, posuere leo. Fusce porta nisi neque, ut aliquet ligula elementum vel. Sed tincidunt consectetur placerat. Pellentesque ac ornare lorem. Cras eros nibh, suscipit in lorem vel, venenatis tincidunt arcu. Nullam sit amet lectus felis. Aliquam erat volutpat. Aenean accumsan dictum volutpat. Donec tincidunt dui in ex finibus ullamcorper. Etiam eu felis nisi. Donec quam turpis, dignissim vitae maximus et, pharetra fermentum nisi. Nam fringilla turpis ut tortor consequat, tempor tincidunt eros vestibulum.

Sed pulvinar finibus sapien ut pharetra. Maecenas porta ullamcorper enim, ac vulputate nulla mattis ac. Nam vitae lectus a massa lacinia

consectetur. Etiam pulvinar interdum nunc sed lobortis. Curabitur at augue sit amet urna lobortis fermentum. Phasellus non facilisis

enim.&nbsp;

				</p>

			</div>

		</div>

	</div>

	<!--<div id="polina">

	<h1>Polina</h1>

	<p>filmed by Alexander Wagner 2011

	<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>

	<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>

	<button>Pause</button>

	</div> -->

</div>



<ss:logic:include page="/tropic/design-elements/opening-div/" />

<p class="clearboth">test</p>

<br />

var vid = document.getElementById("bgvid");

var pauseButton = document.querySelector(".videoContain .pause");



if (window.matchMedia('(prefers-reduced-motion)').matches) {

    vid.removeAttribute("autoplay");

    vid.pause();

    pauseButton.innerHTML = "Resume video";

}



function vidFade() {

  vid.classList.add("stopfade");

}



vid.addEventListener('ended', function()

{

// only functional if "loop" is removed 

vid.pause();

// to capture IE10

vidFade();

}); 





pauseButton.addEventListener("click", function() {

  vid.classList.toggle("stopfade");

  if (vid.paused) {

    vid.play();

    pauseButton.innerHTML = "Pause video";

  } else {

    vid.pause();

    pauseButton.innerHTML = "Resume video";

  }

})

var vid = document.getElementById("bgvid");

var pauseButton = document.querySelector(".videoContain .pause");



if (window.matchMedia('(prefers-reduced-motion)').matches) {

    vid.removeAttribute("autoplay");

    vid.pause();

    pauseButton.innerHTML = "Resume video";

}



function vidFade() {

  vid.classList.add("stopfade");

}



vid.addEventListener('ended', function()

{

// only functional if "loop" is removed 

vid.pause();

// to capture IE10

vidFade();

}); 





pauseButton.addEventListener("click", function() {

  vid.classList.toggle("stopfade");

  if (vid.paused) {

    vid.play();

    pauseButton.innerHTML = "Pause video";

  } else {

    vid.pause();

    pauseButton.innerHTML = "Resume video";

  }

})

0

0

0

0

0

0

0.5

0.5

0

0

1

1

1

1

0

0

0

0

/tropic/about-us/

/tropic/about-us/

0

0

6

6

0

0