Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

76
Views
I have 4 buttons with a Javascript that open 4 php pages with video inside a DIV

I have an embedded video player inside a DIV... I have 4 buttons that open 4 different PHP pages (with a video player on each) that open inside a single DIV. The idea is to have a player that changes flawlessly between those 4 channels. My problem is that when I click on the buttons, only the first page (and video) stays open and playing. If I click a different button, only the first page stays open. The problem seems to be that my Javascript works only for one link. How can I implement that, when I click on a different button, the first page stops to let the second page load.

<script language="javascript">
$(function(){
  $(".button").click(function(){
    $("#pantalla").load("/screen-spa.php");
  });
});
</script>
        
<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-eng.php', 'pantalla');">Music videos</a></span>

        
<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-mov.php', 'pantalla');">Movie clips</a></span>    


<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-tvs.php', 'pantalla');">TV shows</a></span>


<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-spa.php', 'pantalla');">Música en español</a></span>
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

I decided to send another answer with more specifications.

Step 1
Create your buttons with data-lang attribute with the value of your language. Let's name it channels.php:

<!-- data-lang="en": English -->
<button class="btn" data-lang="en">English</button>

<!-- data-lang="fa": Persian (farsi) -->
<button class="btn" data-lang="fa">Persian</button>

<!-- data-lang="fr": French -->
<button class="btn" data-lang="fr">French</button>

Step 2
Add some jQuery to your channel.php file:

<script>
    $(".btn").click(function(){
        // Get data-lang attribute from clicked element
        let lang = $(this).attr("data-lang");

        // Send a GET request to your ajax.php file
        $("#page").load("ajax.php?lang=" + lang);
        // or it can be the URL of your ajax file
        // it's something like this: http://example.com/ajax.php?lang=en
    });
</script>

Step 3 Now your ajax.php should be something like this:

# check if the lang parameter is set in the URL or set "en" language by default
$lang = $_GET['lang'] ?? "en";

# If the language is English
if( $lang == "en" ){
    echo "English content";
}
# If the language is Farsi
else if( $lang == "fa" ){
    echo "Farsi content";
}
# If the language is French
else if( $lang == "fr" ){
    echo "French content";
}

You have to replace your content with echo "... content"; for each language.

I'm not sure how much you know about php, but you can put some HTML codes between PHP without using echo, just close PHP tag, write your HTML, then reopen php tag:

<?php

# some php codes

?>

<h1>HTML content</h1>

<?php

# Some more php contents

?>

in this case, it's something like this:

if( true ){
   # Closing PHP tag
   ?>
   <!-- Writing HTML contents -->
   <h1>HTML content</h1>
   <?php
   # Then reopen PHP tag
}

Finally, you can put your embedded HTML Youtube player instead using echo:

if( $lang == "en" ){
    ?>
       <iframe width="560" height="315" src="https://youtube.com/vide/url?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <?php
}

I hope this was helpful

about 4 years ago · Juan Pablo Isaza Report

0

I'm not sure I understand what you are trying to do, but you should get the page URL from its attribute.

<script language="javascript">
$(function(){
  $(".button").click(function(){
    var address = $(this).attr("data-address");
    $("#pantalla").load(address);
  });
});
</script>

<button class="button" data-address="/screen-eng.php">Music videos</button>

<button class="button" data-address="/screen-mov.php">Movie clips</button>
...

  1. Add data-address attribute with value of your page address

  2. Get current attribute by using $(this).attr("data-address")

But I recommend to use this code instead:

<!-- index.html -->
<button class="btn" data-lang="en">English</button>

<button class="btn" data-lang="fa">Persian</button>

<button class="btn" data-lang="fr">French</button>

<div id="page"></div>

<script>
    $(".btn").click(function(){
        let lang = $(this).attr("data-lang");
        $("#page").load("ajax.php?lang=" + lang);
    });
</script>

then on your server-side handle the request:

// ajax.php
# check if the lang parameter is set in the URL or set "en" language by default
$lang = $_GET['lang'] ?? "en";

if( $lang == "en" ){
    ?>
      <iframe width="560" height="315" src="https://youtube.com/embed/D6Ac5JpCHmI?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <?php
}
else if( $lang == "fa" ){
    ?>
      <iframe width="560" height="315" src="https://youtube.com/another/video?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <?php
}
else if( $lang == "fr" ){
    ?>
      <iframe width="560" height="315" src="https://youtube.com/one/more/video?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <?php
}

Edit

Just add some youtube embedded video player in your PHP and manage them by sending GET to your server.

There is no need to create multiple pages for each video, just add your video URL like this code and get whichever you want by sending a GET request like this:

http://example.com/ajax.php?lang=en

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!