0
184
ViewsHow 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>
·
Santiago Trujillo
2 answers
Answer question0
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
·
Santiago Trujillo
Report
0
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;
}
·
Santiago Trujillo
Report
Answer question