topic Re: video html tag in ArcGIS Hub Questions

video html tag

NFlourish — Thu, 12 Dec 2019 20:45:11 GMT

Our client really wants to have a video underlay as part of the hero/banner when you arrive at the site. It appears that the "video" tag is not supported by the Hub text card widget.

Am I correct, and what is the chance we can actually get the video tag added to the supported tags so it isn't stripped from our saved site?

Re: video html tag

Anonymous User — Thu, 12 Dec 2019 21:06:03 GMT

We'll look into this - thanks for telling us!

Re: video html tag

Anonymous User — Thu, 12 Dec 2019 21:55:13 GMT

one more thing - you mind sending us an example HTML of what you're trying

Re: video html tag

NFlourish — Sun, 12 Dec 2021 16:18:04 GMT

Graham Hudgins‌ - this code is what we're trying to get going. 
I think the <section> tags are also a problem, but those are easy to replace with DIVs. 
The Video tag, though seems to be totally ignored as soon as you exit editing the text card.

<style>
body {
  background: #CCC;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif; }nav {
  background: #333;
  color: #FFF;
  font-weight: bold;
  height: 50px;
  padding: 20px;
  text-transform: uppercase;
  text-align: center; }.masthead {
  height: 800px;
  position: relative;
  margin: 0;
  padding: 0; }.fullscreen-bg {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0; }.fullscreen-bg__video {
  background-position: center;
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
  width: 100%; }.overlay {
  color: #FFF;
  margin: auto;
  position: absolute;
  padding: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5); }
  .overlay h1 {
    font-size: 48px;
    margin: 0;
    padding: 0; }
  .overlay p {
    width: 90%;
    margin: auto;
    padding: 0 0 30px 0; }
  .overlay button {
    background: #00a8e7;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    border: 0;
    padding: 15px 40px; }.content {
  padding: 10px; }@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("img/coast.jpg") center center/cover no-repeat; }
  .fullscreen-bg__video {
    display: none; } }</style>
</head>
<body>
<nav>
  <p>navigation</p>
</nav>
<section class="masthead">
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="http://www.stone-env.net/permian/coast.jpg" class="fullscreen-bg__video">
          <source src="http://www.stone-env.net/permian/coast.webm" type="video/webm">
          <source src="http://www.stone-env.net/permian/coast.mp4" type="video/mp4">
      </video>
    </div>
    <div class="overlay">
      <h1>TITLE</h1>
      <p>Cool Science Title</p>
      <button>Explore the data</button>
    </div>
</section>
<section class="content">
  <h2>This is a sub heading</h2>
  <p>This is a paragraph.</p>
</section>

Re: video html tag

NFlourish — Mon, 16 Dec 2019 17:26:08 GMT

Graham Hudgins‌ - here is a live example of the video tag not working. TechDemo

What surprises me is that it saves the video tag in the source of the text card, so when I got to edit the card, the video tag is there. But when rendered, we can inspect the page and see no video tag is rendered.

Re: video html tag

Anonymous User — Mon, 16 Dec 2019 18:22:40 GMT

We'll look into it.

FWIW, our design team says auto play background violates WCAG 2.1 - Understanding Success Criterion 2.2.2: Pause, Stop, Hide

Re: video html tag

NFlourish — Mon, 16 Dec 2019 20:12:27 GMT

Graham Hudgins‌ - yeah I can understand that autoplaying content can be problematic. Our client is a private entity that is not as concerned with WCAG and laws about this and more about making a visual impact... and they really like the idea of the slowly moving background video.

Re: video html tag

Anonymous User — Thu, 19 Dec 2019 18:11:49 GMT

We have a fix for this in the pipeline. It is slated to be released on January 7th. Thanks!

Re: video html tag

NFlourish — Wed, 08 Jan 2020 19:39:22 GMT

Hi there! Just curious if the video tag fixes got pushed? The last change log for Hub seems to be before Christmas. Thanks for the info!

Re: video html tag

BrianRollison — Wed, 08 Jan 2020 20:52:05 GMT

Hi Nicholas Floersch‌ -- yes they are, changelog was updated yesterday
ArcGIS Hub

Re: video html tag

NFlourish — Thu, 09 Jan 2020 14:30:21 GMT

Great! I thought I checked the changelog on Tuesday but must have just missed the update... or maybe I checked Monday or something. Great looking set of changes! Well done.

Re: video html tag

NFlourish — Thu, 09 Jan 2020 14:32:35 GMT

This has been fixed! Yay!

A demo of it working is shown here:

TechDemo