reel-vision-studio / script.js
zekiwasthere's picture
What are the next steps to building a portfolio for a video editor and film maker
2db8a52 verified
Raw
History Blame Contribute Delete
1.76 kB
// Main JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Video modal functionality
const videoModal = document.createElement('div');
videoModal.id = 'video-modal';
videoModal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden';
videoModal.innerHTML = `
<div class="relative w-full max-w-4xl px-4">
<button id="close-modal" class="absolute -top-12 right-0 text-white hover:text-gray-300 transition duration-300">
<i data-feather="x" class="w-8 h-8"></i>
</button>
<div class="aspect-w-16 aspect-h-9 bg-black">
<iframe id="modal-video" class="w-full h-full" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
`;
document.body.appendChild(videoModal);
// Initialize Feather Icons in modal
feather.replace();
// Close modal functionality
document.getElementById('close-modal')?.addEventListener('click', function() {
document.getElementById('video-modal').classList.add('hidden');
document.getElementById('modal-video').src = '';
});
// Open video in modal (example - you would add this to your video play buttons)
document.querySelectorAll('.play-video').forEach(button => {
button.addEventListener('click', function() {
const videoUrl