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

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Recently, I developed a custom API using Node.js to retrieve information about blogs from Medium.com. The API currently provides: The author/main picture of the article Title A link to the article on medium.com (redundant) The entire article text in the ...

javascriptjqueryhtmlnode.jsdom-manipulation

Displaying an external webpage within a Backbone application

Is it feasible to display an external webpage in a view by using its URL? I am working with Backbone and Handlebars. var AuthorizeInstagramView = Backbone.View.extend({ template: Handlebars.compile(template), initialize: function () { }, ...

javascriptbackbone.jshandlebars.js

"Occasionally, the PHP function for randomly selecting an image may result in

My function is supposed to open a specific directory, create an array of the image files within that directory, and then select a random image from the array to display on a webpage. However, there are instances where it fails to retrieve the image name. ...

phphtmlwordpressimage

Tips for showcasing several images with accompanying content once the webpage has finished loading

I am faced with an issue on my PHP website. The website is a social networking platform with numerous images and contents. I am seeking a way to first display only the content to the user, then show the images after they have all finished loading. Addition ...

javascriptphpjqueryhtmlcss

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

css

Retrieve, establish cookies, and guard against CSRF attacks

Having some difficulty with CSRF in my application while using Isomorphic fetch. The backend sends a CSRF-TOKEN in the set-cookies property: There is advice against directly accessing these cookies in code, so I attempted utilizing the credentials proper ...

javascriptcookiesfetch-api

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

In my Angular 4 application, I have implemented an observable that monitors an input field. When it detects a URL being entered, it triggers a service to make an XHR request. Observable.fromEvent(this._elementRef.nativeElement, 'input') .debou ...

javascriptangularerror-handlingrxjs

Dealing with JSON feed and function events problem with jQuery fullcalendar in Internet Explorer

Currently, I am utilizing jQuery fullcalendar in conjunction with Grails. Initially, I was utilizing events (in the form of a json feed) and observed that each time the user clicks on prev/next or changes views, the json feed URL is invoked. Considering t ...

jquerygrailsfullcalendar

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

javascriptcssreactjstypescriptmaterial-ui

"Looking to programmatically close a modal in JavaScript that was opened using the 'data-target' attribute? Here's how you can

I have a modal template embedded in the same HTML file as my controller. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem">Delete selected item</button> < ...

javascriptangularjsangular-ui-bootstrap

Unable to display PHP response in a div using AJAX - issue persisting

Hey there! I'm currently working on a project where I want the form submission to load a response into a div without refreshing the page. I've looked at various examples of ajax forms with PHP online, but haven't been able to solve my issue ...

javascriptphpjqueryhtmlajax

Looking to streamline your design? Find out how to translate multiple elements to the same position seamlessly

Greetings! This is my debut post on this platform. I am currently engrossed in a project that has presented me with a challenge, and I'm reaching out to seek your insights on a potential solution. Here's the scenario: I have a parent div containi ...

htmlcsscss-positiondisplaytranslate

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...

jquerycsstwitter-bootstrapfont-awesomejquery-events

Unable to choose the div element with id ":1"

Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...

jqueryhtmlcssjquery-selectorscss-selectors

Issue with Heroku deployment: unable to locate JavaScript file

I encountered an issue while deploying my node.js app. Everything seemed to be working fine but it couldn't locate the JavaScript files. The error message displayed was: proove.herokuapp.com/:16 GET 404 (Not Found) Here is the server.js code snip ...

javascripthtmlnode.jsheroku

What is the best way to remove an object from an array in MongoDB?

I am currently using MongoDB and Node.js, but I am facing a small issue when trying to delete an object from an array of objects. Below is the code snippet causing the problem: router.route('/deleteGuestFromJam/:id').delete(function(req, res){ ...

javascriptnode.jsmongodbrestmongoose

Adjust rankings based on the number of upvotes received by a project

I'm facing a challenge with ranking projects based on the number of votes they receive. No matter the vote count, the project always ends up getting ranked as 1. To address this issue, I developed a function to manage the rank count and a return hand ...

javascriptnext.jsvote

What is the best way to pass parameters to a PHP script using AJAX to ensure they are properly processed on the server side?

I'm working with the following function: function myFunction () { $.getJSON('remote.php', function(json) { var messages = json; function check() { ... In this function, I call the remote.php script which e ...

javascriptphpjqueryajax

How to automatically insert a page break after a certain string in an array using JavaScript

I've created a code that is intended to implement page breaks after a specific number of new lines or words. I have defined an array that indicates where these breaks should occur within my element. In the example provided in my jsFiddle, you can see ...

javascriptjquerysplit

Attempting to switch between classes with the click of a button

I am attempting to create a basic animation that involves changing an image from A to B to C when a button is clicked. However, I am encountering an issue with the error message Cannot read properties of undefined (reading 'classList'). I am puzz ...

javascriptbootstrap-5