Link in video not clickable on mobile (iOS) in power saving mode

I have an autoplay video on my site which also serves as a link to another page. But now I found a problem in the power saving mode of the iPhone. Clicking on the video plays the video. But when I click again nothing happens. However, I would like the integrated link to open.

My code:

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

Can you help me so that the link also opens in power saving mode?

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

I ran your code and a few things happened. First, no video. Second, Upon clicking an area that could've been the link, I got a "blocked by content security policy". Can you explain what happened there?

– Warp Drive Enterprises
Dec 31 '18 at 16:59

should work now.

– Mauro
Dec 31 '18 at 19:46

add a comment |

My code:

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

Can you help me so that the link also opens in power saving mode?

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

I ran your code and a few things happened. First, no video. Second, Upon clicking an area that could've been the link, I got a "blocked by content security policy". Can you explain what happened there?

– Warp Drive Enterprises
Dec 31 '18 at 16:59

should work now.

– Mauro
Dec 31 '18 at 19:46

add a comment |

My code:

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

Can you help me so that the link also opens in power saving mode?

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

My code:

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

Can you help me so that the link also opens in power saving mode?

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <a href="http://www.google.com">

    <video autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>

  </a>

</body>

html video mobile html5-video battery-saver

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

edited Jan 2 at 3:58

Dale Burrell

3,35652655

edited Jan 2 at 3:58

Dale Burrell

3,35652655

edited Jan 2 at 3:58

Dale Burrell

3,35652655

asked Dec 31 '18 at 15:22

Mauro

213

asked Dec 31 '18 at 15:22

Mauro

213

asked Dec 31 '18 at 15:22

Mauro

213

I ran your code and a few things happened. First, no video. Second, Upon clicking an area that could've been the link, I got a "blocked by content security policy". Can you explain what happened there?

– Warp Drive Enterprises
Dec 31 '18 at 16:59

should work now.

– Mauro
Dec 31 '18 at 19:46

add a comment |

I ran your code and a few things happened. First, no video. Second, Upon clicking an area that could've been the link, I got a "blocked by content security policy". Can you explain what happened there?

– Warp Drive Enterprises
Dec 31 '18 at 16:59

should work now.

– Mauro
Dec 31 '18 at 19:46

I ran your code and a few things happened. First, no video. Second, Upon clicking an area that could've been the link, I got a "blocked by content security policy". Can you explain what happened there?

– Warp Drive Enterprises
Dec 31 '18 at 16:59

should work now.

– Mauro
Dec 31 '18 at 19:46

add a comment |

1 Answer
1

active

oldest

votes

You can accomplish this with JS and an onclick event.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53988976%2flink-in-video-not-clickable-on-mobile-ios-in-power-saving-mode%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can accomplish this with JS and an onclick event.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

add a comment |

You can accomplish this with JS and an onclick event.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

add a comment |

You can accomplish this with JS and an onclick event.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

You can accomplish this with JS and an onclick event.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

404.404 is not a real URL, it is just to produce a 404 error and demonstrate that the code redirects.

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

const targetURL = "404.404";

// Not a real address



function openURL() {

  window.location = targetURL;

}

video {

  width: 80vw;

  height: auto;

  margin-left: auto;

  margin-right: auto;

  display: block;

}

<body>

  <video onclick="openURL()" autoplay loop playsinline src="https://www.w3schools.com/html/mov_bbb.mp4" target="_self"></video>





</body>

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

answered Dec 31 '18 at 20:08

Warp Drive Enterprises

441422

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

add a comment |

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

Thanks for the suggestion! But the video is still not clickable in power saving mode on iOS.

– Mauro
Jan 1 at 18:57

@Mauro And it works without power saving on everything else?

– Warp Drive Enterprises
Jan 1 at 20:59

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu