How to disable iframe from being highlighted

Admin 1
Viewed 559

When I double click the white background, the iframe becomes highlighted, how do I disable that via css?

https://jsfiddle.net/516y29ka/

To reproduce, double mouse click the white background and you will see the iframe become highlighted.

How is that disabled via css?

<iframe width="642" height="361" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

enter image description here

iframe css
2 Answers

Use user-select: none; on the iframe.

<!DOCTYPE html>

<head>
  <style>
    .video-frame {
      user-select: none;
    }
  </style>

  <body>

    <iframe class="video-frame" width="642" height="361" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  </body>

  </html>

It's supported by almost all browsers: https://caniuse.com/?search=user-select
For more info refer spcifications: https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-user-select

user_152739680

Use user-select and set it to none To avoid compatibility issues, add vendor prefixes: -webkit- -ms- -moz- -o-

    .video-frame {
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
    }
user_144592510
Related