i have a view more function and it works well with only paragraph and image.
when i have insert paragraph and video together in one container. the expand cannot cover the video
In result, the video appear in half meaning the height of the video is half
looks like the box of expand is being limit
<?php
session_start();
$nickname = isset($_SESSION['nickname']) ? $_SESSION['nickname'] : 'Guest';
// Database connection
$conn = new mysqli("localhost", "root", "", "forum");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
date_default_timezone_set("Asia/Kuala_Lumpur");
$discussion_id = isset($_GET['id']) ? intval($_GET['id']) : 0;
// Fetch discussion details
$discussion_sql = "SELECT * FROM discussions WHERE id = $discussion_id";
$result = $conn->query($discussion_sql);
if ($result->num_rows > 0) {
$discussion = $result->fetch_assoc();
} else {
echo "Discussion not found.";
exit();
}
// Fetch comments and replies
// Add your existing code here for comments and replies...
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discussion</title>
<style>
.discussion-video-container {
overflow: hidden;
position: relative;
width: 100%;
max-width: 800px;
margin: 10px auto;
background: #000;
}
.discussion-video {
width: 100%;
height: auto;
object-fit: contain;
}
.discussion-video.expanded {
height: auto;
}
.view-more {
display: none;
cursor: pointer;
color: #007bff;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="forum-discussion">
<!-- Discussion content -->
<div class="subforum-description">
<?php if (!empty($discussion['video_path'])): ?>
<div class="discussion-video-container">
<video controls class="discussion-video" id="discussionVideo">
<source src="<?php echo htmlspecialchars($discussion['video_path']); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<?php endif; ?>
<button class="view-more" id="viewMoreBtn" onclick="toggleVideo()">View More</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var videoContainer = document.querySelector('.discussion-video-container');
var viewMoreButton = document.getElementById('viewMoreBtn');
// Set the initial max height
var maxHeight = 450; // Adjust as needed
videoContainer.style.maxHeight = maxHeight + 'px';
// Check if the video container exceeds max height
if (videoContainer.scrollHeight > maxHeight) {
viewMoreButton.style.display = 'inline-block';
}
});
function toggleVideo() {
var videoContainer = document.querySelector('.discussion-video-container');
var viewMoreButton = document.getElementById('viewMoreBtn');
if (videoContainer.classList.contains('expanded')) {
videoContainer.classList.remove('expanded');
videoContainer.style.maxHeight = '450px'; // Collapse
viewMoreButton.innerText = 'View More';
} else {
videoContainer.classList.add('expanded');
videoContainer.style.maxHeight = videoContainer.scrollHeight + 'px'; // Expand
viewMoreButton.innerText = 'View Less';
}
}
</script>
</body>
</html>
I want to make sure the video can display fully. No need full-size atleast I want to view the overview of the video
width and height smaller is just fine. as long as the video can be expanded fully