video html tag

348
11
Jump to solution
12-12-2019 12:45 PM
NFlourish
Occasional Contributor

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?

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
BrianRollison
Esri Contributor

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

View solution in original post

11 Replies
GrahamHudgins
Esri Regular Contributor

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

0 Kudos
GrahamHudgins
Esri Regular Contributor

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

0 Kudos
NFlourish
Occasional Contributor
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>
0 Kudos
NFlourish
Occasional Contributor

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.

0 Kudos
GrahamHudgins
Esri Regular Contributor

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 

0 Kudos
NFlourish
Occasional Contributor

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.

0 Kudos
AndrewTate1
New Contributor II

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

0 Kudos
NFlourish
Occasional Contributor

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!

0 Kudos
BrianRollison
Esri Contributor

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