Search code examples
cssiframe

How to disable iframe from being highlighted

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

Solution

  • 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