File: /var/www/html/video-rental/wp-content/themes/video-rental/index.php
<?php /* Template Name: Home Page */
get_header();
?>
<div class="banner-wrap">
<div class="banner-slider">
<div class="banner-slide banner-slide-1">
<div class="container custom-container">
<div class="content-wrap">
<h2 class="banner-title">
<span>Tisha B’Av: </span>
Stories That Inspire,
Messages That Matter
</h2>
<div class="btn-wrap">
<a href="#" class="btn link"> <img
src="<?php echo get_template_directory_uri(); ?>/img/play.svg" alt=""> <span>Rabbi
Yechiel
Spero</span></a>
<a href="#" class="btn link"><img src="<?php echo get_template_directory_uri(); ?>/img/play.svg"
alt=""> <span>Eli Scheller</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="arrow-btm">
<a href="#video-section"><img src="<?php echo get_template_directory_uri(); ?>/img/arrow-btm.svg" alt=""></a>
</div>
</div>
<div class="home-content-wrap" id="video-section">
<div class="container custom-container">
<div class="row">
<div class="col-12">
<div class="head-wrap">
<h2 class="title-wrap">Tisha B’Av Video Presentations</h2>
<p class="para-wrap">Experience two powerful and meaningful presentations designed to connect,
inspire, and bring deeper reflection this Tisha B’Av. Each video supports Chesed of
Flatbush, an organization dedicated to helping families in crisis.</p>
</div>
</div>
</div>
<div class="video-wrap">
<!-- <div class="row row-align">
<div class="col-lg-6">
<div class="video-inner-wrap">
<video controls poster="<?php echo get_template_directory_uri(); ?>/img/video-img-1.png">
<source src="video1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="col-lg-6">
<div class="content-wrap">
<h2 class="sub-title-wrap">Stories That Inspire With <span>Rabbi Yechiel Spero</span></h2>
<p class="para-wrap"><span class="color-white">Real stories. Lasting impact.</span><br />
Rabbi Yechiel Spero shares moving, true stories that stir the heart and uplift the soul.
A
meaningful presentation that brings timeless messages of strength and resilience to
life.
</p>
<ul class="listing">
<li class="price">Price : <div class="num">$500.00</div>
</li>
<li class="star"><img src="<?php echo get_template_directory_uri(); ?>/img/star.svg" alt=""> 7.3/10</li>
<li class="time"><img src="<?php echo get_template_directory_uri(); ?>/img/time.svg" alt=""> 1h 47m</li>
</ul>
<div class="btn-wrap">
<a href="#" class="btn link"><span>Rent Now</span></a>
</div>
</div>
</div>
</div>
<div class="row row-align">
<div class="col-lg-6">
<div class="video-inner-wrap">
<video controls poster="<?php echo get_template_directory_uri(); ?>/img/video-img-2.png">
<source src="video1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="col-lg-6">
<div class="content-wrap">
<h2 class="sub-title-wrap">A Message for Children With <span>Eli Scheller</span></h2>
<p class="para-wrap">
Through captivating stories and real-life lessons, kids will learn about:<br />
A man who lost everything… and still found light<br />
One of the most secretive Mossad missions ever<br />
A wealthy man’s brilliant contest to choose who inherits it all
</p>
<p class="para-wrap">These unforgettable stories will teach our children about Ahavas
Yisroel, staying
positive during hard times, and the deep message of Tisha B’Av: being kind, loving, and
united — no matter what.<br>
Let’s help our kids shine brighter, grow stronger, and bring more light into the world!
</p>
<ul class="listing">
<li class="price">Price : <div class="num">$500.00</div>
</li>
<li class="star"><img src="<?php echo get_template_directory_uri(); ?>/img/star.svg" alt=""> 7.3/10</li>
<li class="time"><img src="<?php echo get_template_directory_uri(); ?>/img/time.svg" alt=""> 1h 47m</li>
</ul>
<div class="btn-wrap">
<a href="#" class="btn link"><span>Rent Now</span></a>
</div>
</div>
</div>
</div> -->
<?php
$args = [
'post_type' => 'vm_video',
'posts_per_page' => 2, // Get exactly 2 videos
'post_status' => 'publish'
];
$video_query = new WP_Query($args);
if ($video_query->have_posts()):
while ($video_query->have_posts()):
$video_query->the_post();
$trailer_link = get_post_meta(get_the_ID(), 'vm_trailer_link', true);
$description = get_post_meta(get_the_ID(), 'vm_description', true);
$price = get_post_meta(get_the_ID(), 'vm_price', true);
$rental = get_post_meta(get_the_ID(), 'vm_rental', true);
$thumb = get_post_meta(get_the_ID(), 'vm_video_thumbnail', true);
?>
<div class="row row-align">
<div class="col-lg-6">
<div class="video-inner-wrap">
<video controls poster="<?= esc_url($thumb); ?>">
<source src="<?= esc_url($trailer_link); ?>" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="col-lg-6">
<div class="content-wrap">
<h2 class="sub-title-wrap">Stories That Inspire With <span><?php the_title(); ?></span></h2>
<!-- <p class="para-wrap"><span class="color-white">Real stories. Lasting impact.</span> -->
</p>
<div class="para-wrap">
<?= wp_kses_post(wpautop($description)); ?>
</div>
<ul class="listing">
<li class="price">Price : <div class="num">$<?= esc_html($price); ?></div>
</li>
<li class="star"><img src="<?= get_template_directory_uri(); ?>/img/star.svg" alt=""> 7.3/10
</li>
<li class="time"><img src="<?= get_template_directory_uri(); ?>/img/time.svg" alt="">
<?= esc_html($rental); ?> days</li>
</ul>
<div class="btn-wrap">
<a href="#" class="btn link"><span>Rent Now</span></a>
<button type="button" class="btn link" data-bs-toggle="modal" data-bs-target="#myModal">
Rent Now
</button>
</div>
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
else:
echo '<p>No videos found.</p>';
endif;
?>
</div>
</div>
</div>
<section class="offer-box">
<div class="container custom-container offer-box-inner">
<div class="special-offer"><img src="<?php echo get_template_directory_uri(); ?>/img/offer-tag.png"></div>
<div class="top-content-sec">
<div class="left-title">Bundle & Save –<br> Get Both Videos at <span class="highlight">20% Off</span>
</div>
<div class="content">
<p> Enhance your Tisha B’Av experience with both powerful presentations – one for adults and one for
children – and receive 20% off when you purchase them together.</p>
<ul class="list">
<li><span>Rabbi Yechiel Spero</span> – Inspiring true stories for adults</li>
<li><span>Eli Scheller</span> – A meaningful message created just for children</li>
</ul>
<p class="change-txt"> All proceeds support Chesed of Flatbush, helping families in crisis when they
need it most.</p>
</div>
</div>
<div class="row video-outer">
<div class="col-md-6 box-1">
<div class="video-wrapper">
<video controls poster="<?php echo get_template_directory_uri(); ?>/img/poster2.png">
<source src="video1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="play-icon"></div>
</div>
<div class="wrper">
<p class="wrp-content"> Stories That Inspire With <span class="highlight">Rabbi Yechiel
Spero</span></p>
<!-- <p class="subt-txt"> Real stories. Lasting impact.</p> -->
<p class="video-description">
Rabbi Yechiel Spero shares moving, true stories that stir the heart and uplift the soul. A
meaningful presentation that brings strength and resilience to life.
</p>
</div>
</div>
<div class="col-md-6 box1">
<div class="video-wrapper">
<video controls poster="<?php echo get_template_directory_uri(); ?>/img/poster1.png">
<source src="video1.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div class="play-icon"></div>
</div>
<div class="wrper">
<p class="wrp-content"> Message for Children With <span class="highlight">Eli
Scheller</span></span></p>
<p class="video-description">
Through captivating stories and real-life lessons, kids will learn about:
A man who lost everything… and still found light One of the most secretive Mossad
missions ever A wealthy man’s brilliant contest to choose who inherits it all</p>
<p class="video-description">
These unforgettable stories will teach our children about Ahavas Yisroel, staying positive
during hard times, and the deep message of Tisha B’Av: being kind, loving, and united — no
matter what.Let’s help our kids shine brighter, grow stronger, and bring more light into the
world!
</p>
</div>
</div>
</div>
<div class="bottom-sec">
<div class="botm-title">Select License: </div>
<div class="bottom-inner">
<div class="license-options">
<!-- <label class="custom-radio">
<input type="radio" name="license" value="single" checked>
<span class="radio-label">Single <span class="price">$18</span></span>
</label>
<label class="custom-radio">
<input type="radio" name="license" value="family">
<span class="radio-label">Family <span class="price">$36</span></span>
</label> -->
<label><input type="radio" id="packageone" name="radio-group">
<label for="packageone">Single</label></label> <label> <span class="price">$18</span></label>
<label class="ms-2"><input type="radio" id="packagetwo" name="radio-group">
<label for="packagetwo">Family</label></label> <label> <span class="price">$36</span></label>
<!-- <label><input type="radio" name="license" checked> Single <span>$18</span></label>
<label><input type="radio" name="license"> Family <span>$36</span></label> -->
</div>
<button class="btn btn-rent">Rent Now</button>
</div>
</div>
</div>
</section>
<section class="rental-instruction">
<div class="container custom-container">
<div class="title">Rental Instruction</div>
<div class="instruction-inner">
<div class="subtitle-col">
<span class="img-ico"><img src="<?php echo get_template_directory_uri(); ?>/img/play-video.svg"
alt="play-video"></span>
<span class="subtitle">
For Digital Rental
</span>
</div>
<div class="contents">
<ul class="list">
<li>Users can browse and select the video they want to rent.</li>
<li>The rental can be completed securely through the website.</li>
<li>Once the payment is successful, the video will be added to the user's account.</li>
<li>Rented videos can be accessed anytime from the “My Account” section.</li>
<li>Videos are available to stream for the duration of the rental period (e.g., 48 hours).</li>
<li>No additional apps or downloads are required — videos can be viewed on desktop, tablet, or
mobile.</li>
<li>Each rental is a one-time payment with no recurring charges.</li>
<li>All proceeds go to Chesed of Flatbush to support families in crisis.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="faq-sec">
<div class="container custom-container">
<div class="top-sec">
<div class="title">Frequently Asked Questions</div>
<div class="content">Everything you need to know about renting and watching our Tisha B’Av videos</div>
</div>
<div class="faq-section text-white">
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true">
What’s included in the package?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">
You’ll receive access to two powerful Tishabav videos: A stirring and emotional presentation by Rabbi Yechiel Spero, A dynamic and engaging children’s video by Rabbi Eli Scheller.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo">
How much does it cost?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
$36 per family
$18 for individuals (watching alone)
This one-time payment gives full access to both videos.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree">
How do I access the videos?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
After payment, you’ll be able to log in to your account on our website to watch the videos. Everything is conveniently available in your personal dashboard — no email links required.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour">
How long can I watch the videos?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
You’ll have access for 1 full year, with unlimited rewatching at any time during that period.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFive">
Can I share the videos with others?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
No. Access is for your household only. Please do not share your login or let others outside your family view the videos.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseSix">
Is there something for children?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Yes! Rabbi Eli Scheller’s video is created specifically for kids, with age-appropriate storytelling and lessons to make Tishabav meaningful for them too.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- The Modal -->
<div class="modal custom-modal check-out-modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header border-0">
<h2>
<span class="mr-2">
<i><img src="img/check_ic.svg" alt=""></i>
</span> Check Out
</h2>
<button type="button" class="close-btn" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body border-0 d-flex flex-column">
<!-- Step Indicator -->
<div class="progress-wrapper d-flex align-items-center justify-content-center">
<div class="step done">
<span class="circle">
<img src="img/tick-mark.svg" alt="checkmark" class="check-img" />
</span>
<div class="label">Details</div>
</div>
<div class="divider"></div>
<div class="step">
<span class="circle">02</span>
<div class="label">Card Detail</div>
</div>
</div>
<!-- Summary and Address -->
<div>
<!-- summary-box -->
<div class="summary-box">
<h3 class="sumary-title">Summary</h3>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3 inner-sec">
<label>Name :</label>
</div>
<div class="col-md-9 inner-sec">
<label>Rhonda Rhodes</label>
</div>
<div class="col-md-3 inner-sec">
<label>Package :</label>
</div>
<div class="col-md-9 inner-sec">
<div class="d-flex gap-3">
<div class="form-check">
<input class="form-check-input" type="radio" id="packageone"
name="radio-group">
<label class="form-check-label" for="packageone">Single</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="packagetwo"
name="radio-group">
<label class="form-check-label" for="packagetwo">Family</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-end justify-content-lg-end">
<div class="d-flex flex-column justify-content-end amount-cover">
<label class="amount-label">Amount</label>
<label class="amount">$36.00</label>
</div>
</div>
</div>
</div>
</div>
<!-- address-box -->
<div class="address-box">
<form class="form">
<h3 class="address-title">Address</h3>
<div class="row">
<!-- Street Address -->
<div class="col-md-12 form-grp">
<label class="form-label">Street Address</label>
<input type="email" class="form-control custom-input" placeholder="Street Address">
</div>
<!-- State -->
<div class="col-md-6 form-grp">
<label class="form-label">State</label>
<select class="form-control custom-input">
<option value="">California</option>
</select>
</div>
<!-- City -->
<div class="col-md-6 form-grp">
<label class="form-label">City</label>
<input type="email" class="form-control custom-input" placeholder="City">
</div>
<!-- Zip/Postal Code -->
<div class="col-md-6 form-grp">
<label class="form-label">Zip/Postal Code</label>
<input type="email" class="form-control custom-input" placeholder="Zip/Postal Code">
</div>
<!-- Phone Number -->
<div class="col-md-6 form-grp">
<label class="form-label">Phone Number</label>
<div class="d-flex custom-phone-wrapper">
<select class="form-select custom-select-code">
<option selected>+01</option>
<option value="+91">+91</option>
<option value="+44">+44</option>
<option value="+61">+61</option>
</select>
<input type="text" class="form-control custom-phone-input"
placeholder="2756 3232 234" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer d-flex justify-content-end border-0">
<button type="button" class="btn back-btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn verify-btn">Next</button>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal custom-modal check-out-modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header border-0">
<h2>
<span class="mr-2">
<i><img src="img/check_ic.svg" alt=""></i>
</span> Check Out
</h2>
<button type="button" class="close-btn" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body border-0 d-flex flex-column">
<!-- Step Indicator -->
<div class="progress-wrapper d-flex align-items-center justify-content-center">
<div class="step done">
<span class="circle">
<img src="img/tick-mark.svg" alt="checkmark" class="check-img" />
</span>
<div class="label">Details</div>
</div>
<div class="divider"></div>
<div class="step">
<span class="circle">02</span>
<div class="label">Card Detail</div>
</div>
</div>
<!-- <div class="mb-5">
<div class="check-step">
<div class="step d-flex justify-content-center align-items-center flex-column">
<span class="rounded-circle d-flex justify-content-center align-items-center active">01</span>
<label class="text-align">Details</label>
</div>
<div class="divider"></div>
<div class="step d-flex justify-content-center align-items-center flex-column">
<span class="rounded-circle d-flex justify-content-center align-items-center">02</span>
<label class="text-align">Card Detail</label>
</div>
</div>
</div> -->
<!-- Summary and Address -->
<div>
<!-- summary-box -->
<!-- address-box -->
<div class="address-box address-box1">
<form class="form card-form">
<!-- Card Number with logos -->
<div class="form-group position-relative mb-4">
<label class="form-label">Card Number</label>
<div class="input-with-icons">
<input type="text" class="form-control custom-input" placeholder="1123 256 85562">
<div class="card-icons">
<img src="img/Visa.svg" alt="Visa" />
<img src="img/Discover.svg" alt="Mastercard" />
<img src="img/Mastercard.svg" alt="Discover" />
<img src="img/Maestro.svg" alt="Discover" />
</div>
</div>
</div>
<!-- Expiration Date and Security Code -->
<div class="row mb-4">
<div class="col-md-6">
<label class="form-label">Expiration Date</label>
<input type="text" class="form-control custom-input" placeholder="MM / YY">
</div>
<div class="col-md-6">
<label class="form-label">Security Code</label>
<input type="text" class="form-control custom-input" placeholder="CVC">
</div>
</div>
<!-- Country and Zip Code -->
<div class="row">
<div class="col-md-6">
<label class="form-label">Country</label>
<select class="form-control custom-input">
<option value="">California</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Zip Code</label>
<input type="text" class="form-control custom-input" placeholder="123 456">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer d-flex justify-content-end border-0">
<button type="button" class="btn back-btn" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn verify-btn">Sbmit</button>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>