Can a video be exchanged with a hello world in html?

Question

Can a video be exchanged with a hello world in html?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

It's a task that I have, since I am new in what programming is, it makes me a little weird that. The teacher told us that the video for example has to be on the left and the hello world on the right and that when clicking, they change places. Is that possible? I left in doubt xq after explaining it made a face, the first thing that crossed his mind is that it is a test

html video

asked by BrianAlex 12.11.2017 в 03:18

source

2 answers

Get data from the Firebase database? Cake PHP 3.5 Conventions

score 0 · Answer 1

Yes, it is possible, I did something similar, what you have to do is put the video on a div and the hello world another div and a button or link, a css to position the divs, the button or link qllama a a function in javascripts, and that function moves the divs.

score 0 · Answer 2

There will be many ways to do that.

Here are two ways to do it.

The code does the same, both in pure Javascript and jQuery.

Form 1:

/*jQuery*/
$('#checkJq').change(function () {

    if ($(this).is(':checked')) {
        $('#div2').insertBefore($('#div1'));
    } else {
        $('#div1').insertBefore($('#div2'));
    }

});

/*JS*/

var checkJs = document.getElementById("checkJS");

  checkJs.onclick = function() { 
      var div1 = document.getElementById("div1");
      var parentDiv = div1.parentNode;
      var div2 = document.getElementById("div2");


      if (this.checked){
        parentDiv.insertBefore(div2, div1);  
      }else{
        parentDiv.insertBefore(div1, div2);  
    } 
  };

.content {
  width: 520px;
  margin: 0 auto;
}

.div1 {
  width: 260px;
  height: 315px;
  background: red;
  float: left;
}

.div2 {
  width: 260px;
  height: 315px;
  background: red;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Cambiar con jQuery<input id="checkJq" type="checkbox" value="0" />
Cambiar con Javascript<input id="checkJS" type="checkbox" value="0" />


<div class="content">
  <div id="div1" class="div1">No soy un vídeo</div>
  <div id="div2" class="div2"><iframe width="260" height="315" src="https://www.youtube.com/embed/NvVpAxQuBg4" frameborder="0" allowfullscreen></iframe></div>
</div>

Form 2:

function cambiarJS() {

  var strDiv1 = document.getElementById('div1').innerHTML;
  var strDiv2 = document.getElementById('div2').innerHTML;

  document.getElementById('div1').innerHTML = strDiv2;
  document.getElementById('div2').innerHTML = strDiv1;
}

function cambiarJQ() {
  var strDiv1 = $("#div1").html();
  var strDiv2 = $("#div2").html();

  $("#div1").html(strDiv2);
  $("#div2").html(strDiv1);
}

.content {
  width: 520px;
  margin: 0 auto;
}

.div1 {
  width: 260px;
  height: 315px;
  background: red;
  float: left;
}

.div2 {
  width: 260px;
  height: 315px;
  background: red;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnJS" onclick="cambiarJS()">Cambia usando JavaScript</button>
<button id="btnJQ" onclick="cambiarJS()">Cambia usando jQuery</button>
<div class="content">
  <div id="div1" class="div1">No soy un vídeo</div>
  <div id="div2" class="div2"><iframe width="260" height="315" src="https://www.youtube.com/embed/NvVpAxQuBg4" frameborder="0" allowfullscreen></iframe></div>
</div>