Enhancing Online Presence with Video Gallery Website Development

I'm in the process of creating a website and need help finalizing my video page. I envision a layout similar to this example: https://i.stack.imgur.com/hctui.gif

The main feature should be a large video placeholder at the top, followed by several thumbnail images below.

When users click on one of the thumbnails, I want the corresponding video to load in the larger space above. While I am comfortable with HTML and CSS for the design aspect, I am unsure about the PHP or JavaScript needed to make this functionality work. What approach should I take? After searching online for a solution without success, I'm hesitant to rely on WordPress plugins for creating video galleries.

If anyone has any advice on how to achieve this, I would greatly appreciate it.

edit: Just to clarify, I will be embedding YouTube videos rather than hosting them myself.

javascriptjqueryhtmlcss

Answer №1

A simple and efficient method is to utilize the YouTube embed code and then switch out the src attribute:

http://jsfiddle.net/zs90on6r/

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/tXoyQssMwMM" frameborder="0" allowfullscreen></iframe>

<a class="another" href="https://www.youtube.com/embed/mKCRPJcOp90">Time Travel Stories</a>
<a class="another" href="https://www.youtube.com/embed/o_JZbQao6jo">Skate</a>

Javascript (using jQuery):

$(".another").on("click", function(e) {
    e.preventDefault();
    $("iframe").eq(0).attr("src", $(this).attr("href"));
})

Answer №2

Here is the information you requested:

Check out this demo: http://codepen.io/techsin/full/EjrqVz/

View the code at: http://codepen.io/techsin/pen/EjrqVz

$('#vids .thumb').click(function(){
  $('#mainVid video').attr('src',$(this).data('url')).get(0).play() 
});

The video element has a default play method which allows you to easily run a video by invoking that method.

In my code, I utilize a jquery selector to get the native element and then call the native method play. Jquery does not currently have a built-in play method for videos or sounds.

The functionality of the code involves replacing the src url of the video element in order to initiate playback. This is similar to changing an image source without altering the actual image element itself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with custom fonts not showing in PDFs when using Puppeteer, even though they are displayed in screenshots

I've been working on dynamically creating PDF files using the puppeteer library, but I'm facing an issue where the generated PDF doesn't display the custom fonts (.woff) that I have specified. Instead, it defaults to using the system font, T ...

javascriptnode.jsnext.jspuppeteer

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

I'm currently diving into the world of NextJS and utilizing the Link component from the 'next/link' package. One thing that has been puzzling me is how the <Link> component ultimately renders an <a> tag with a href='/tosomew ...

javascripthtmlreactjsreact-routernext.js

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

Filtering data from Arduino using web serial communication

My setup consists of an Arduino kit connected to a webserial API that sends data to an HTML div identified by the id 'target'. Currently, all the data is being logged into one stream despite having multiple dials and switches on the Arduino. Th ...

javascripthtmlarduino

An element failing to submit using AJAX requests

I have a login form with an <a> element that I want to use for making a post request. However, when I'm examining the backend Django code during debugging, it seems to interpret the request method as GET instead of POST. HTML <form id= ...

javascriptjqueryajaxdjango

Locate the closest pals near my present whereabouts

Is it possible to find my friends by obtaining their location from their mobile phones when they are near me? I have a code snippet below with the variable cities where I can input the numbers of my friends. Can I achieve this or do I need to make some m ...

javascriptandroidhtmlgeolocationlocation

Unusual behavior in ReactJS and HTML5 video player observed

I currently have two React presentation components that include HTML5 video tags. The first component, named Homepage, is as follows: export default class Homepage extends React.Component { render() { return( <div className="Homepage"> ...

htmlreactjsvideo

Is it possible to nest an array within a value of a Sass object?

I'm currently attempting to incorporate an array within the value of an object. $background-things: ( 'a': ['100vh', 'transparent', 'column'], 'higher': ['70vh', '#000', &ap ...

csssass

Is it possible to access the chrome://webrtc-internals/ variables through an API in JavaScript?

I couldn't find any information about how to access the logged variables in chrome://webrtc-internals/ on google. There is not even a description of the graphs available there. I am specifically interested in packetsLost, googCurrentDelayMs, and goo ...

javascriptgoogle-chromewebrtcgoogle-chrome-apppeerjs

Using the ES6 object spread operator in the JSX syntax of ReactJS

// modules/NavLink.js import React from 'react' import { Link } from 'react-router' export default React.createClass({ render() { //for example this.props={from: "home", to: "about"} return <Link {...this.props} a ...

javascriptecmascript-6reactjs

Retrieving user information from Firebase with Promise instead of Observable

In my React project, I successfully implemented the Observer pattern to retrieve user data from Firebase. This approach made perfect sense and here is a snippet of the code where I utilized the observer pattern: unsubscribeFromAuth = null; componentDidMou ...

javascriptreactjsfirebaseauthentication

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Updating a Nested Form to Modify an Object

There is an API that fetches an object with the following structure: { "objectAttributes": [ { "id": "1", "Name": "First", "Comment": "First" }, { "id": "2", "Name": "Second", "Comment": "Second" } ] ...

javascriptreactjs

Why do I need to control-click in order to download the link?

Lately, I have been operating a simple node.js server for hosting a website. However, recently, I encountered an issue where one of my download links began redirecting to the index.html page instead of initiating the download process for the PDF it is supp ...

node.jshtml

Can Regex expressions be utilized within the nodeJS aws sdk?

Running this AWS CLI command allows me to retrieve the correct images created within the past 45 days. aws ec2 describe-images --region us-east-1 --owners self -- query'Images[CreationDate<`2021-12-18`] | sort_by(@, &CreationDate)[].Name&apos ...

javascriptnode.jsregexamazon-web-servicesaws-sdk

Is it possible to enable sorting for every column in the b-table component?

After reviewing the information on sorting per column in the bootstrap-vue documentation, I am curious if it is possible to enable sorting for the entire table. ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Guide to using vite-plugin-rewrite-all in conjunction with Quasar for Vue 3 - or alternative method to enable periods in paths

Encountering a 404 error when using quasar+vite in vueRouterMode: 'history' mode with paths containing a period/dot in the id? This issue has been discussed in various places: https://github.com/vitejs/vite/issues/2415 https://github.com/vitejs/ ...

javascriptvue.jsvuejs3vitequasar-framework

Updating a dropdown select in jQuery using AJAX and returning an empty string when it changes

Could someone please help me figure out what I am doing wrong here? When I use console.log(), it is returning an empty string instead of an array. I am trying to update the second select box when the onChange event is triggered on the first select box, bu ...

phpjqueryajaxcodeigniterpost

Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with: ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2 ...

javascriptimagetypescriptionic-frameworkcompression

Managing a digital timepiece within a multiplayer gaming environment

I'm currently developing a fast-paced game where players control a block resembling a clock. To accurately calculate the time taken by each player to make moves, I store the start time of the game and record the timestamp of every move in the databas ...

javascriptmysqlnode.jstypescript