Looking for a way to add a border radius to your iframe? Need the iframe to be dynamic? Need to still be able to click in it? Here’s How!
This javascript function will set an html element to add a border and force the iframe inside to hide its edges
You can choose the pure javascript function, or the jquery function
pure javascript
function setIframeBorder(){
let iframeBorder = document.getElementsByTagName('iframe-border');
for(let i = 0; i < iframeBorder.length; i++){
let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
}
}
setInterval(setIframeBorder, 10);
jquery
function setIframeBorderJquery(){
$('iframe-border').each(function(){
$(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
$('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
});
}
setInterval(setIframeBorderJquery, 10);
CSS
You can add any css styles you want to this element
iframe-border{
border-radius: 20px;
}
Usage
Now to use this new element, you will only need html
The iframe is a normal youtube embed
<iframe-border width="560" height="315">
<iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>
The Final Result
Comments
Guest January 3rd, 2023
Link
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('c',5)='c
Guest January 3rd, 2023
Link
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('g',0)='g
Guest January 3rd, 2023
Link
123456/**/and/**/3=DBMS_PIPE.RECEIVE_MESSAGE('n',5)
Guest January 3rd, 2023
Link
123456/**/and/**/0=DBMS_PIPE.RECEIVE_MESSAGE('z',0)
Guest January 3rd, 2023
Link
123456'and(select+1)&gt;0waitfor/**/delay'0:0:5
Guest January 3rd, 2023
Link
123456'and(select+1)&gt;0waitfor/**/delay'0:0:0
Guest January 3rd, 2023
Link
123456/**/and(select+1)&gt;0waitfor/**/delay'0:0:5'/**/
Guest January 3rd, 2023
Link
123456/**/and(select+1)&gt;0waitfor/**/delay'0:0:0'/**/
Guest January 3rd, 2023
Link
(select*from(select+sleep(5)union/**/select+1)a)
Guest January 3rd, 2023
Link
(select*from(select+sleep(0)union/**/select+1)a)
Guest January 3rd, 2023
Link
123456'"\(
Guest January 3rd, 2023
Link
123456鎈'"\(
Guest January 3rd, 2023
Link
123456'and/**/convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1391660021')))&gt;'0
Guest January 3rd, 2023
Link
123456"and"p"="q
Guest January 3rd, 2023
Link
convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1851328117')))
Guest January 3rd, 2023
Link
123456"and"x"="x
Guest January 3rd, 2023
Link
123456/**/and/**/cast(md5('1002899140')as/**/int)&gt;0
Guest January 3rd, 2023
Link
123456'and'b'='v
Guest January 3rd, 2023
Link
123456'and(select'1'from/**/cast(md5(1143761605)as/**/int))&gt;'0
Guest January 3rd, 2023
Link
123456'and't'='t
Comments are closed.