I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video.
What I aim to achieve is similar functionality, but with 6 videos.
(function ($) {
'use strict';
// Your custom JavaScript code goes here...
})(window.jQuery || window.Zepto);
// Initiate FitVid.js and other operations//
$(document).ready(function () {
// Initialize FitVid.js plugin for all video containers
$(".containiframeCeleb2").fitVids();
$(".containiframeRiver2").fitVids();
$(".containiframeBach").fitVids();
$(".containiframeLouie").fitVids();
$(".containiframeRiver1").fitVids();
$(".containiframeCeleb1").fitVids();
$(".containiframe").fitVids();
// Iframe/player variables declaration
var iframe = $('#video')[0];
var player = $f(iframe);
// Open on play function calls
$('.play').click(function () {
// Display content overlay when video is played
$('.content').css('left', 0)
$('.content').addClass('show')
player.api("play");
})
// Other play functions for different video containers go here...
// Close content overlay on click outside
$('.content').click(function () {
$('.content').removeClass('show')
setTimeout(function () {
$('.content').css('left', '-100%')
}, 300);
player.api("pause");
})
});
/* CSS styles definition goes here... */
<!-- HTML structure for embedded videos and overlays -->
<body>
<div class="content">
<!-- Embedded video and close icon for each video container -->
<!-- Fullscreen container configuration for multiple videos-->
</div>
<header>
<!-- Play buttons for each video -->
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>For an ongoing update of the progress made, you can visit the JSFiddle link.