Disabling/Hiding iframe Scroll bar?
Question
I have an HTML Code for embedding my (laut.fm) radio station (radio player). Now the problem is when entering the code into new wordpress site, there is a ugly frame and a ugly scroll bar. The code works with Iframe.
<figure><iframe width="1350" height="120" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&player%5Bcolor%5D%5Bcolor%5D=white&player%5Bshadow%5D=false&player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&player%5Bborder%5D%5Bcolor%5D=%23cccccc&player%5Bborder%5D%5Bwidth%5D=0px&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure>
2 answers
solution1
1 ACCPTED 2019-09-21 13:51:41
There are many ways for this.
add scrolling="no" in the iframe tag and style="border:0;"
<figure><iframe width="1350" height="120" scrolling="no" style="border:0;" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&player%5Bcolor%5D%5Bcolor%5D=white&player%5Bshadow%5D=false&player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&player%5Bborder%5D%5Bcolor%5D=%23cccccc&player%5Bborder%5D%5Bwidth%5D=0px&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure>
solution2
0 2019-09-21 14:44:15
To remove the border, you can add style="border:none" to the style code.
To remove the scrollbar, the best is to just increase the height of the iframe, so that it fits the contents. As an alternative, you can add scrolling="no" to the html element, that is not valid HTML. It is supported by most browsers at the moment, but that might change in the future.
<figure><iframe width="1350" height="125" style="border:none" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&player%5Bcolor%5D%5Bcolor%5D=white&player%5Bshadow%5D=false&player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&player%5Bborder%5D%5Bcolor%5D=%23cccccc&player%5Bborder%5D%5Bwidth%5D=0px&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure> <!-- increased height ^^^ ^^^^^^^^^^^ style code to remove border -->
But I tested your code, and 120 seems to be enough. The screenshot you posted (with scrollbar) uses height="116" instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.