Feature-Policy Header

Very early draft, but newest Chrome/Chromium will show warnings,
if you do not allow the use of those features.

Also, you probably need to activate handling this new, draft feature in your Chrome’s flags-section: chrome://flags/#enable-feature-policy, otherwise Chrome will probably ignore any directives..
Either from HTTP-headers or iframe attributes… and will apply the simple can/can’t logic (for example, vibration enabled only when inside a user-click handle method, etc..) .

Here is an Apache snippet to add a few useful features:

#feature policy
<ifModule mod_headers.c>
  Header set Feature-Policy '{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}'
</ifModule>

read more: https://github.com/WICG/feature-policy

For iframes you should either use the same format of JSON-like,
or a simpler one that uses enable attribute, still not 100% set.

you may specify both for now, and best to allow them with sandbox too (more secure):

<iframe src="https://..." sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation" seamless="false" featurepolicy='{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}' enable="vibrate geolocation fullscreen"></iframe>

here is a full HTML working example:

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="rtl" lang="he-IL" language="Hebrew" charset="UTF-8" encoding="UTF-8">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="Content-Type"    content="text/html;charset=UTF-8"/>
  <meta name="viewport"              content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
  <meta name="robots"                content="index,follow,snippet,archive,odp,translate,imageindex">
  <link rel="shortcut icon"          href="favicon.ico" type="image/x-icon"/>
  <link rel="icon"                   href="favicon.ico" type="image/x-icon"/>
  <meta name="description"           content="Nikud is a mobile-friendly-website to help you add Hebrew-punctuation and copy&paste the content very easily to be used in somewhere else such as whatsapp.">
  <meta name="keywords"              content="Nikud,punctuation,ניקוד,Hebrew,עברית,עברי">
  <title>נִיקוּד | Nikud</title>
  <style type="text/css" media="all">
    /*<![CDATA[*/
    @charset "UTF-8";
    @namespace "http://www.w3.org/1999/xhtml";
    html,body,iframe{
      touch-action:     manipulation;
      text-align:              right;
      vertical-align:       baseline;
      display:                 block;
      resize:                   none;
      -webkit-user-drag:        none;
         -moz-user-drag:        none;
              user-drag:        none;
      direction:                 rtl;
      position:             absolute;
      
      width:100%;
      height:100%;
      overflow:hidden;
      
      position:absolute;
      top:0;
      bottom:100%;
      left:100%;
      right:0;

      outline:                            none;
      border:                             none;
      padding:                               0;
      margin:                                0;
      box-sizing:                   border-box;
      text-size-adjust:                   100%;
    }
    /*]]>*/
  </style>
</head>
<body><iframe allowfullscreen="true" frameborder="0" marginheight="0" marginwidth="0" referrerpolicy="unsafe-url" scrolling="yes" featurepolicy='{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}' enable="vibrate geolocation fullscreen"  sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation" seamless="false" target="" src="https://eladkarako.github.io/nikud/"></iframe></body>
</html>