AR in Chrome

by Derk-Jan Hartman

HTML

<div class="thumb tleft">
<div>Normal video</div>
<div class="thumbinner"><video id="mwe_player_1" preload="metadata" class="thumbimage" width="300" height="126" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Spring_-_Blender_Open_Movie.webm/300px--Spring_-_Blender_Open_Movie.webm.jpg"></video>
<div class="thumbcaption">original</div></div></div>

<div class="thumb tleft">
<div>Replaced video</div>
<div class="thumbinner"><video id="mwe_player_2" preload="metadata" class="thumbimage" width="300" height="126" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Spring_-_Blender_Open_Movie.webm/300px--Spring_-_Blender_Open_Movie.webm.jpg"></video>
<div class="thumbcaption">original</div></div></div>
<div class="thumb tleft">
<div>Late inserted video</div>
<div class="thumbinner">
<div class="thumbcaption">original</div></div></div>

<div class="thumb tleft">
<div>Late inserted image</div>
<div class="thumbinner">
<div class="thumbcaption">original</div></div></div>

CSS

.thumb {
  background: white;
  float:left;
  width: 300px
}
.thumbinner {
  background: red;
}

/* Shrink videos to fit rather than overflowing containers */
video {
	height: auto;
	max-width: 100%;
}

.mw-tmh-player {
	display: inline-block;
	position: relative;
	/* fix height of inline-block T259549 */
	line-height: 0;
}

JavaScript

const videoWrapper = `
<span class="mw-tmh-player video" id="myvid"><a class="mw-tmh-play"></span></a></span>
`
const vid3 = `
<video id="mwe_player_3" preload="metadata" class="thumbimage" width="300" height="126" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Spring_-_Blender_Open_Movie.webm/300px--Spring_-_Blender_Open_Movie.webm.jpg" ></video>`

const img4 = `
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Spring_-_Blender_Open_Movie.webm/300px--Spring_-_Blender_Open_Movie.webm.jpg" width="300" height="126"/>
`

$('.thumbcaption').text('initialized')

setTimeout( function() {
  let origVideo = document.querySelector('#mwe_player_2')
  let fragment = document.createElement('div')
  fragment.innerHTML = videoWrapper;
  let wrapper = fragment.children[0];

  let clonedVideo = origVideo.cloneNode();
  wrapper.insertBefore( clonedVideo, wrapper.querySelector( '.mw-tmh-play') )

  $(origVideo).replaceWith( $( wrapper ) )
  $('.thumbcaption', wrapper.parentNode ).text('updated2')
}, 5000)


setTimeout( function() {
  let fragment = document.createElement('div')
  fragment.innerHTML = vid3;
  let video = fragment.children[0];
  let thumbinner3 = document.querySelectorAll('.thumbinner')[2];
  //let clonedVideo = origVideo.cloneNode();
  thumbinner3.insertBefore( video, document.querySelectorAll('.thumbcaption')[2] )

  /* $(origVideo).replaceWith( $( wrapper ) ) */
  $('.thumbcaption', thumbinner3 ).text('updated3')
}, 5000);

setTimeout( function() {
  let fragment = document.createElement('div')
  fragment.innerHTML = img4;
  let image = fragment.children[0];
  let thumbinner4 = document.querySelectorAll('.thumbinner')[3];
  //let clonedVideo = origVideo.cloneNode();
  thumbinner4.insertBefore( image, document.querySelectorAll('.thumbcaption')[3] )

  /* $(origVideo).replaceWith( $( wrapper ) ) */
  $('.thumbcaption', thumbinner4 ).text('updated4')
}, 5000);