Code

Embed Two or More YouTube Videos with Lite Version

300

You want to embed multiple YouTube video on post. So you can easily embed two or more videos using shortcode on WordPress post.

How to Do

Open functions.php file and paste code.

function video_embed_shortcode($atts) {
$atts = shortcode_atts(array(
'ids' => '',
'prev_label' => 'Official Video',
'next_label' => 'Full Audio',
), $atts, 'video_embed');

$videoIds = explode(',', $atts['ids']);
$prevLabel = $atts['prev_label'];
$nextLabel = $atts['next_label'];

ob_start();
?>
<div id="videoContainer"></div>

<?php if (count($videoIds) > 1) : ?>
<div class="multiple_embed_video_navigation">
<button id="prevButton" onclick="changeVideo(-1)" class="multiple_embed_video_prev-button"><i class="fa fa-step-backward"></i> <?php echo $prevLabel; ?></button>
<button id="nextButton" onclick="changeVideo(1)" class="multiple_embed_video_next-button"><?php echo $nextLabel; ?> <i class="fa fa-step-forward"></i></button>
<?php endif; ?>
</div>

<script>
var videoIds = <?php echo json_encode($videoIds); ?>;
var currentVideoIndex = 0;
var videoContainer = document.getElementById("videoContainer");
var prevButton = document.getElementById("prevButton");
var nextButton = document.getElementById("nextButton");

function loadVideo() {
var videoId = videoIds[currentVideoIndex];
videoContainer.innerHTML = '<div class="youtube-player" data-id="' + videoId + '"></div>';
initYouTubeVideos();

if (prevButton && nextButton) {
prevButton.style.display = (currentVideoIndex > 0) ? "inline-block" : "none";
nextButton.style.display = (currentVideoIndex < videoIds.length - 1) ? "inline-block" : "none";
}
}

function changeVideo(direction) {
currentVideoIndex += direction;
if (currentVideoIndex < 0) {
currentVideoIndex = videoIds.length - 1;
}
if (currentVideoIndex >= videoIds.length) {
currentVideoIndex = 0;
}
loadVideo();
}

function labnolIframe(e){var t=document.createElement("iframe");t.setAttribute("src","https://www.youtube.com/embed/"+e.dataset.id+"?autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("width","20"),t.setAttribute("height","20"),t.setAttribute("allowfullscreen","1"),t.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),e.parentNode.replaceChild(t,e)}function initYouTubeVideos(){for(var e=document.querySelectorAll(".youtube-player"),t=0;t<e.length;t++){var a=e[t].dataset.id,r=document.createElement("div");r.setAttribute("data-id",a);var i=document.createElement("img");i.src="//i.ytimg.com/vi/ID/hqdefault.jpg".replace("ID",a),r.appendChild(i);var l=document.createElement("div");l.setAttribute("class","play"),r.appendChild(l),r.onclick=function(){labnolIframe(this)},e[t].appendChild(r)}}

// Load the initial video
loadVideo();
</script>
<?php
return ob_get_clean();
}
add_shortcode('video_embed', 'video_embed_shortcode');

Then Save functions.php file.
Use [video_embed ids=”videoID1,videoID2,videoID3” prev_label=”Official Video” next_label=”Full Audio“] and show embed YouTube videos with lite version.

CSS code

.multiple_embed_video_navigation {
overflow:hidden;
display:grid;
grid-auto-flow:column;
align-items:center;
justify-items:center}

.multiple_embed_video_next-button,
.multiple_embed_video_prev-button {
background:#000;
padding:6px;
width:100%;
text-align:center;
color:#fff;
font-weight:700}

.multiple_embed_video_next-button:hover,
.multiple_embed_video_prev-button:hover {
background:#b50000;
color:#fff}

Watch Video

Hope this code helpful for you. Thanks for visiting.