@extends('frontEnd.layout')
@section('content')
<?php
use App\Models\Topic;
$All_videos = Topic::select()->whereNotNull("video_file")->get()->toArray();
// dd($All_videos);
$youtube = "watch?v=";
$youtube_rep = "embed/";
$drive = "view?usp=sharing";
$dirve_rep = "preview";
// dd($All_videos);
?>
<div class="video-head">
<div class="container">
<div class="row">
<!-- <div class="headtext">
<h3>
<span>Lion Clubs India Videos</span>
</h3>
</div> -->
<!-- db -->
@foreach($All_videos as $video)
<?php
$explode_video = explode('/',$video['video_file']);
// dd($explode_video);
// dd($video['video_file']);
?>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-12 col-xl-4">
<div class="card " >
<!-- width="355" height="315" -->
<!-- <iframe src="{{$video['video_file']}}" onclick = "stopVideo(body)" title="YouTube video player" frameborder="0" allow ="picture-in-picture" allowfullscreen>
</iframe> -->
<?php if (strpos($video['video_file'], $youtube) !== false) { ?>
<iframe src={{str_replace($youtube,$youtube_rep,$video['video_file'])}} allowfullscreen></iframe>
<?php } elseif (strpos($video['video_file'], $drive) !== false) { ?>
<iframe src={{str_replace($drive,$dirve_rep,$video['video_file'])}} allowfullscreen></iframe>
<?php } ?>
<!-- <iframe src="https://www.youtube.com/embed/gg6E8kkpe-0" onclick = "stopVideo(body)" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<div class="card-body">
<h4 class="card-title">{{$video['title_en']}}</h4>
</div>
</div>
</div>
@endforeach
<!-- db -->
<!-- <div class="col-md-4 col-lg-4 col-xs-12 col-sm-12 col-xl-4">
<div class="card " >
<!-- width="355" height="315" -->
<!-- <iframe src="https://www.youtube.com/embed/gg6E8kkpe-0" onclick = "stopVideo(body)" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h4 class="card-title">International President Brian Sheehan Biography</h4>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-12 col-xl-4">
<div class="card " >
<iframe src="https://drive.google.com/file/d/1Z8jTYDnIJFJR3JQBViv7he0IKolRth4O/preview"onclick = "stopVideo(body)" allow="autoplay"></iframe>
<div class="card-body">
<h4 class="card-title">Together We Can</h4>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-12 col-xl-4">
<div class="card ">
<iframe src="https://www.youtube.com/embed/KOUz-ocDL2M" title="YouTube video player" frameborder="0"onclick = "stopVideo(body)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h4 class="card-title">Outside the Box</h4>
</div>
</div>
</div> -->
</div>
</div>
</div>
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".font-button").bind("click", function () {
var size = parseInt($('body').css("font-size"));
if ($(this).hasClass("plus")) {
size = size + 2;
} else {
size = size - 2;
if (size <= 10) {
size = 10;
}
}
$('body').css("font-size", size);
});
});
// to stop the video
function stopVideo(element) {
// getting every iframe from the body
var iframes = element.querySelectorAll('iframe');
// reinitializing the values of the src attribute of every iframe to stop the YouTube video.
for (let i = 0; i < iframes.length; i++) {
if (iframes[i] !== null) {
var temp = iframes[i].src;
iframes[i].src = temp;
}
}
};
</script>
@endsection