



<script src="/lib/lodash/dist/lodash.js"></script>
<script src="/lib/platform/platform.js"></script>
<script src="/lib/benchmark/benchmark.js"></script>
<script src="/js/testrunner.js?v=uhhjlNf8Vw1G0SsjCNR5kDrchDwmF1nqr2pn9YS1pz0"></script>

    <span><div data-bs="video"></div>
<div data-bs="video" data-info="https://www.youtube.com/watch?v=77MmbQv7ndM">
</div>
<div class="bs-product-thumbnail">
  <div data-bs="video" data-info="https://www.youtube.com/watch?v=77MmbQv7ndM">
  </div>
</div>
<div data-bs="video"></div>
<div data-bs="video" data-info="https://vimeo.com/272976101">
  </div>
<div class="bs-product-thumbnail">
  <div data-bs="video" data-info="https://vimeo.com/272976101">
  </div>
</div>
<div data-bs="video"></div></span>

<div id="validation-html-preparation"></div>

<script type="text/javascript">
    pageController = new TestRunnerController();
</script>
<textarea id="benchmark_definition_json" style="display:none">
    {&quot;ScriptPreparationCode&quot;:null,&quot;TestCases&quot;:[{&quot;Name&quot;:&quot;v1&quot;,&quot;Code&quot;:&quot;function loadVideo() {\r\n  let videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  try{\r\n    if(videos.length){\r\n      videos.forEach(function(video){\r\n        let dataVideo = video.dataset.info;\r\n        if(dataVideo !== undefined){\r\n          if (dataVideo.indexOf(\u0022youtube\u0022) != -1 || dataVideo.indexOf(\u0022youtu.be\u0022) != -1) {\r\n            let code = dataVideo.substring(dataVideo.length, (dataVideo.length - 11));\r\n            video.innerHTML = \u0022\u003Cimg title=\u0027youtube\u0027  src=\u0027https://img.youtube.com/vi/\u0022 \r\n              \u002B code \r\n              \u002B \u0022/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0022;\r\n            if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n              video.addEventListener(\u0022click\u0022, function(){\r\n                video.innerHTML = \u0022\u003Ciframe src=\u0027https://www.youtube.com/embed/\u0022\r\n                  \u002B code \r\n                  \u002B \u0022?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0022;\r\n              });\r\n            }//closest bs-product-thumbnail\r\n            //youtube ----------------------------------------------------------------\r\n          }else if(dataVideo.indexOf(\u0022vimeo\u0022) != -1){\r\n            var apiVimeo = new XMLHttpRequest();\r\n            apiVimeo.responseType = \u0027json\u0027;\r\n            apiVimeo.open(\u0027GET\u0027, \u0027//vimeo.com/api/oembed.json?url=\u0027 \u002B dataVideo, true);\r\n            apiVimeo.onload = function () {\r\n              if (apiVimeo.response != null) {\r\n                video.innerHTML = \u0022\u003Cimg title=\u0027\u0022 \r\n                  \u002B apiVimeo.response.title \r\n                  \u002B \u0022\u0027 \u0022 \u002B \u0022src=\u0027\u0022\r\n                  \u002B apiVimeo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027) \u002B \u0022\u0027\u003E\u0022\r\n                if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n                  video.addEventListener(\u0022click\u0022, function(){\r\n                    video.innerHTML = apiVimeo.response.html\r\n                  });\r\n                }//closest bs-product-thumbnail\r\n              }// api response\r\n            }//onload\r\n            apiVimeo.send(null);    \r\n          }//vimeo ------------------------------------------------------------------------\r\n        }// if != undefined\r\n      })//videos.each\r\n    }\r\n  }catch(ex){\r\n    console.log(ex.message)\r\n  }\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n})();&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;v2&quot;,&quot;Code&quot;:&quot;function loadVideo() {\r\n  let videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  try{\r\n    if(videos.length){\r\n      videos.forEach(function(video){\r\n        let dataVideo = video.dataset.info;\r\n        if(dataVideo !== undefined){\r\n          if (dataVideo.indexOf(\u0022youtube\u0022) != -1 || dataVideo.indexOf(\u0022youtu.be\u0022) != -1) {\r\n            let code = dataVideo.substring(dataVideo.length, (dataVideo.length - 11));\r\n            video.innerHTML = \u0060\u003Cimg title=\u0027youtube\u0027 src=\u0027https://img.youtube.com/vi/${code}/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0060;\r\n            if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n              video.addEventListener(\u0022click\u0022, function(){\r\n                video.innerHTML = \u0060\u003Ciframe src=\u0027https://www.youtube.com/embed/${code}?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0060;\r\n              });\r\n            }//closest bs-product-thumbnail\r\n            //youtube ----------------------------------------------------------------\r\n          }else if(dataVideo.indexOf(\u0022vimeo\u0022) != -1){\r\n            var apiVimeo = new XMLHttpRequest();\r\n            apiVimeo.responseType = \u0027json\u0027;\r\n            apiVimeo.open(\u0027GET\u0027, \u0060//vimeo.com/api/oembed.json?url=${dataVideo}\u0060, true);\r\n            apiVimeo.onload = function () {\r\n              if (apiVimeo.response != null) {\r\n                video.innerHTML = \u0060\u003Cimg title=\u0027${apiVimeo.response.title}\u0027 src=\u0027${apiVimeo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027)}\u0027\u003E\u0060;\r\n                if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n                  video.addEventListener(\u0022click\u0022, function(){\r\n                    video.innerHTML = apiVimeo.response.html\r\n                  });\r\n                }//closest bs-product-thumbnail\r\n              }// api response\r\n            }//onload\r\n            apiVimeo.send(null);    \r\n          }//vimeo ------------------------------------------------------------------------\r\n        }// if != undefined\r\n      })//videos.each\r\n    }\r\n  }catch(ex){\r\n    console.log(ex.message)\r\n  }\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n})();&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;v3&quot;,&quot;Code&quot;:&quot;function loadVideo() {\r\n  let videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  try{\r\n    for(let n = 0; n \u003C videos.length; n\u002B\u002B){\r\n      let video = videos[n]\r\n      let dataVideo = video.dataset.info\r\n      if (dataVideo.indexOf(\u0022youtube\u0022) != -1 || dataVideo.indexOf(\u0022youtu.be\u0022) != -1) {//youtube -----------------------------\r\n        let code = dataVideo.substr(dataVideo.length-11,11);\r\n        video.innerHTML = \u0060\u003Cimg title=\u0027youtube\u0027 src=\u0027https://img.youtube.com/vi/${code}/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0060;\r\n        if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n          video.addEventListener(\u0022click\u0022, function(){\r\n            video.innerHTML = \u0060\u003Ciframe src=\u0027https://www.youtube.com/embed/${code}?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0060;\r\n          });\r\n        }//closest bs-product-thumbnail\r\n        //youtube -----------------------------------------------------------------------------\r\n      }else if(dataVideo.indexOf(\u0022vimeo\u0022) != -1){ // vimeo ------------------------------------\r\n        let apiVimeo = new XMLHttpRequest();\r\n        apiVimeo.responseType = \u0027json\u0027;\r\n        apiVimeo.open(\u0027GET\u0027, \u0060//vimeo.com/api/oembed.json?url=${dataVideo}\u0060, true);\r\n        apiVimeo.onload = function () {\r\n          if (apiVimeo.response != null) {\r\n            video.innerHTML = \u0060\u003Cimg title=\u0027${apiVimeo.response.title}\u0027 src=\u0027${apiVimeo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027)}\u0027\u003E\u0060\r\n            if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n              video.addEventListener(\u0022click\u0022, function(){\r\n                video.innerHTML = apiVimeo.response.html\r\n              });\r\n            }//closest bs-product-thumbnail\r\n          }// api response\r\n        }//onload\r\n        apiVimeo.send(null);\r\n        //vimeo ----------------------------------------------------------------------------  \r\n      }else {\r\n        console.warn(\u0022loadVideo() error: formato de video no soportado, porfavor usar s\u00F3lo youtube o vimeo\u0022);\r\n      }\r\n    }// if != undefined\r\n  }catch(ex){\r\n    console.log(ex.message)\r\n  }\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n})();&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;v4&quot;,&quot;Code&quot;:&quot;function loadVideo() {\r\n  const videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  let dataVideo;\r\n  let code\r\n  for(let n = 0; n \u003C videos.length; n\u002B\u002B){\r\n    let video = videos[n]\r\n    dataVideo = video.dataset.info || \u0022\u0022;\r\n    if (dataVideo.indexOf(\u0022youtube\u0022) != -1 || dataVideo.indexOf(\u0022youtu.be\u0022) != -1) {//youtube -----------------------------\r\n      code = dataVideo.substr(dataVideo.length-11,11);\r\n      video.innerHTML = \u0060\u003Cimg title=\u0027youtube\u0027 src=\u0027https://img.youtube.com/vi/${code}/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0060;\r\n      if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n        video.addEventListener(\u0022click\u0022, function(){\r\n          this.innerHTML = \u0060\u003Ciframe src=\u0027https://www.youtube.com/embed/${code}?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0060;\r\n        },false);\r\n      }//closest bs-product-thumbnail\r\n      //youtube -----------------------------------------------------------------------------\r\n    }else if(dataVideo.indexOf(\u0022vimeo\u0022) != -1){ // vimeo ------------------------------------\r\n      let apiVideo = new XMLHttpRequest();\r\n      apiVideo.responseType = \u0027json\u0027;\r\n      apiVideo.open(\u0027GET\u0027, \u0060//vimeo.com/api/oembed.json?url=${dataVideo}\u0060, true);\r\n      apiVideo.onload = function () {\r\n        if (apiVideo.response != null) {\r\n          video.innerHTML = \u0060\u003Cimg title=\u0027${apiVideo.response.title}\u0027 src=\u0027${apiVideo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027)}\u0027\u003E\u0060\r\n          if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n            video.addEventListener(\u0022click\u0022, function(){\r\n              this.innerHTML = apiVideo.response.html\r\n            },false);\r\n          }//closest bs-product-thumbnail\r\n        }// api response\r\n      }//onload\r\n      apiVideo.send(null);\r\n      //vimeo ----------------------------------------------------------------------------  \r\n    }else if(dataVideo === \u0022\u0022) {\r\n      console.warn(\u0060loadVideo() error: data-info sin datos\u0060);\r\n    }else{\r\n      console.warn(\u0060loadVideo() error: formato de video \u0022${dataVideo}\u0022 no soportado, porfavor usar s\u00F3lo youtube o vimeo\u0060);\r\n    }\r\n  }// if != undefined\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n})();&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;v6&quot;,&quot;Code&quot;:&quot;function loadVideo() {\r\n  let videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  try{\r\n    for(let n = 0; n \u003C videos.length; n\u002B\u002B){\r\n      let video = videos[n]\r\n      let dataVideo = video.dataset.info ||\u0022\u0022;\r\n      if (dataVideo.indexOf(\u0022youtube\u0022) !== -1 || dataVideo.indexOf(\u0022youtu.be\u0022) !== -1) {//youtube -----------------------------\r\n        let code = dataVideo.substr(dataVideo.length-11,11);\r\n        video.innerHTML = \u0060\u003Cimg title=\u0027youtube\u0027 src=\u0027https://img.youtube.com/vi/${code}/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0060;\r\n        if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n          video.addEventListener(\u0022click\u0022, function(){\r\n            this.innerHTML = \u0060\u003Ciframe src=\u0027https://www.youtube.com/embed/${code}?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0060;\r\n          });\r\n        }//closest bs-product-thumbnail\r\n        //youtube -----------------------------------------------------------------------------\r\n      }else if(dataVideo.indexOf(\u0022vimeo\u0022) !== -1){ // vimeo ------------------------------------\r\n        let apiVimeo = new XMLHttpRequest();\r\n        apiVimeo.responseType = \u0027json\u0027;\r\n        apiVimeo.open(\u0027GET\u0027, \u0060//vimeo.com/api/oembed.json?url=${dataVideo}\u0060, true);\r\n        apiVimeo.onload = function () {\r\n          if (apiVimeo.response != null) {\r\n            video.innerHTML = \u0060\u003Cimg title=\u0027${apiVimeo.response.title}\u0027 src=\u0027${apiVimeo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027)}\u0027\u003E\u0060\r\n            if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n              video.addEventListener(\u0022click\u0022, function(){\r\n                this.innerHTML = apiVimeo.response.html\r\n              });\r\n            }//closest bs-product-thumbnail\r\n          }// api response\r\n        }//onload\r\n        apiVimeo.send(null);\r\n        //vimeo ----------------------------------------------------------------------------  \r\n      }else {\r\n        console.warn(\u0022loadVideo() error: formato de video no soportado, porfavor usar s\u00F3lo youtube o vimeo\u0022);\r\n      }\r\n    }// if != undefined\r\n  }catch(ex){\r\n    console.log(ex.message)\r\n  }\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n})();&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;lazyload&quot;,&quot;Code&quot;:&quot;function isOutOfViewport(elem) {\r\n  // Get element\u0027s bounding\r\n  let bounding = elem.getBoundingClientRect();\r\n  // Check if it\u0027s out of the viewport on each side\r\n  let out = {};\r\n  out.top = bounding.top \u003C 0;\r\n  out.left = bounding.left \u003C 0;\r\n  out.bottom = bounding.bottom \u003E (window.innerHeight || document.documentElement.clientHeight);\r\n  out.right = bounding.right \u003E (window.innerWidth || document.documentElement.clientWidth);\r\n  out.any = out.top || out.left || out.bottom || out.right;\r\n  return out;\r\n};\r\n\r\nfunction loadVideo() {\r\n  let videos = document.querySelectorAll(\u0022[data-bs=\u0027video\u0027]\u0022);\r\n  try{\r\n    for(let n = 0; n \u003C videos.length; n\u002B\u002B){\r\n      let video = videos[n]\r\n      let isOut = isOutOfViewport(video);\r\n      if(!isOut.any){\r\n        let dataVideo = video.dataset.info ||\u0022\u0022;\r\n        if (dataVideo.indexOf(\u0022youtube\u0022) !== -1 || dataVideo.indexOf(\u0022youtu.be\u0022) !== -1) {//youtube -----------------------------\r\n          let code = dataVideo.substr(dataVideo.length-11,11);\r\n          video.innerHTML = \u0060\u003Cimg title=\u0027youtube\u0027 src=\u0027https://img.youtube.com/vi/${code}/maxresdefault.jpg\u0027\u003E\u003Ci class=\u0027icon fab fa-youtube\u0027\u003E\u003C/i\u003E\u0060;\r\n          if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n            video.addEventListener(\u0022click\u0022, function(){\r\n              this.innerHTML = \u0060\u003Ciframe src=\u0027https://www.youtube.com/embed/${code}?autoplay=1\u0026showinfo=0\u0026rel=0\u0027 allowfullscreen allow=\u0027autoplay\u0027\u003E\u0060;\r\n            });\r\n          }//closest bs-product-thumbnail\r\n          //youtube -----------------------------------------------------------------------------\r\n        }else if(dataVideo.indexOf(\u0022vimeo\u0022) !== -1){ // vimeo ------------------------------------\r\n          let apiVimeo = new XMLHttpRequest();\r\n          apiVimeo.responseType = \u0027json\u0027;\r\n          apiVimeo.open(\u0027GET\u0027, \u0060//vimeo.com/api/oembed.json?url=${dataVideo}\u0060, true);\r\n          apiVimeo.onload = function () {\r\n            if (apiVimeo.response !== null) {\r\n              video.innerHTML = \u0060\u003Cimg title=\u0027${apiVimeo.response.title}\u0027 src=\u0027${apiVimeo.response.thumbnail_url_with_play_button.replace(\u0027295x166\u0027, \u00271200x676\u0027)}\u0027\u003E\u0060\r\n              if(!video.closest(\u0022.bs-product-thumbnail\u0022)){\r\n                video.addEventListener(\u0022click\u0022, function(){\r\n                  this.innerHTML = apiVimeo.response.html\r\n                });\r\n              }//closest bs-product-thumbnail\r\n            }// api response\r\n          }//onload\r\n          apiVimeo.send(null);\r\n          //vimeo ----------------------------------------------------------------------------  \r\n        }else {\r\n          console.warn(\u0022loadVideo() error: formato de video no soportado, porfavor usar s\u00F3lo youtube o vimeo\u0022);\r\n        }\r\n      }// if != undefined\r\n    }\r\n\r\n  }catch(ex){\r\n    console.log(ex.message)\r\n  }\r\n}\r\n\r\n(function(){\r\n  loadVideo()\r\n  window.addEventListener(\u0027scroll\u0027, loadVideo, false);\r\n})();&quot;,&quot;IsDeferred&quot;:false}]}
</textarea>

<form style="display:none;" id="autoreload_form" action="/Benchmarks/TestFrameForValidationWithHtmlPrepCode?autostart=1" method="post">
    <input type="hidden" name="htmlPrepCode" id="htmlPrepCode">
</form>