Develop Reference

CSS letter-spacing together with line-through

Is there any css/js solution how to center line through the text while using letter-spacing? While single line text it is possible to accomplish centered line-through thanks to pseudo element ::before or ::after, but that's not possible on block elements like <p> or <div>.
h2, p {
letter-spacing: 1em;
text-decoration: line-through;
text-align: center;
}
p {
letter-spacing: .5em;
}
<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</p>

Here is an idea where you can rely on background and box-decoration-break to create the line-through and you can easily adjust its size and position. You will basically remove one letter spacing from the total width.
It's important to note that the background need to be applied to an inline element:
p {
letter-spacing: .5em;
text-align:center;
}
p span {
background:
linear-gradient(#000,#000) /* Coloration */
0 calc(50% + 0.2ex) /* position */
/
calc(100% - .5em) 1px /* width height */
no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

Why does the accordion open upwards for mobile?

The accordion sometimes open upwards instead of downwards and the issue appears to be caused by the "flex-direction". This is a problem because the user has to scroll up to the see beginning part of the ".content" div.
The accordion is in the right container and has been set to appear above the left container with "flex-direction".
How do I get the accordion to always open downwards with "flex-direction"?
var acc = document.getElementsByClassName("label");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
.stuff {
background:#ebeef2;
padding:1em;
box-sizing:border-box;
}
.container {
display:flex;
flex-direction:column;
}
.left,
.right {
width:100%;
}
.left {
order:2;
background:blue;
padding:1em;
box-sizing:border-box;
}
.right {
order:1;
background:green;
padding:1em;
box-sizing:border-box;
}
.label {
font-size:2em;
font-weight:bold;
cursor: pointer;
position:relative;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.content {
max-height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
padding:1em;
box-sizing:border-box;
}
.content.show {
opacity: 1;
max-height: 100%;
}
.label:after {
content: '+';
font-size: 32px;
right: 10px;
top: 0;
position: absolute;
font-weight: 100;
}
.label.active:after {
content: '-';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>
<div class="container">
<div class="left">Left Side</div>
<div class="right">
<div class="label">Label 1</div>
<div class="content">Content 1</div>
<div class="label">Label 2</div>
<div class="content">Content 2</div>
<div class="label">Label 3</div>
<div class="content">Content 3</div>
<div class="label">Label 4</div>
<div class="content">Content 4</div>
</div>
</div>
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

Setting the max-height to 100% on open won't actually animate the height change. For that to work with CSS, you need to set a precise value in a fixed unit, like 200px. This might cause jumping on the screen. Since jquery is already included, you might be better with slideToggle()

Why does the accordion open upwards with "flex-direction:column"?

My layout consist of 2 columns, the left side has text and the right side has an accordion. The right side has been positioned with "flex-direction" to appear on top of the left side, but this causes the accordion within the right side to open upwards in stead of downwards.
How do I get the accordion in the right side to always open downwards when the parent div uses "flex-direction: column"?
var acc = document.getElementsByClassName("label");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
.stuff {
background: #ebeef2;
}
.container {
display: flex;
flex-direction: column;
}
.left,
.right {
width: 100%;
}
.left {
order: 2;
background: blue;
}
.right {
order: 1;
background: green;
}
.label {
font-size: 2em;
font-weight: bold;
cursor: pointer;
position: relative;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.content {
max-height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
padding: 1em;
box-sizing: border-box;
}
.content.show {
opacity: 1;
max-height: 100%;
}
.label:after {
content: '+';
font-size: 32px;
right: 10px;
top: 0;
position: absolute;
font-weight: 100;
}
.label.active:after {
content: '-';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex.
An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi.
Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu,
in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis
ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii
facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae
mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel
eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti
eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>
<div class="container">
<div class="left">Left Side</div>
<div class="right">
<div class="label">Label 1</div>
<div class="content">Content 1</div>
<div class="label">Label 2</div>
<div class="content">Content 2</div>
<div class="label">Label 3</div>
<div class="content">Content 3</div>
<div class="label">Label 4</div>
<div class="content">Content 4</div>
</div>
</div>
<div class="stuff">In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex.
An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi.
Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu,
in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis
ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel eu, habeo vivendum senserit duo no. Duo ne alii
facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti eos cu, sea cu quis integre pertinax. Ut vitae
mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed. In ridens invenire sit. Vel ponderum vulputate ex, mel no erant dissentias interpretaris. Amet dicat possit vel
eu, habeo vivendum senserit duo no. Duo ne alii facete inciderint.Cum aliquam persecuti cu, in lorem dicit sonet vix, est soluta noster ex. An nam novum verear antiopam, nominati moderatius vel at. Pro quis impetus consequuntur in, autem augue deleniti
eos cu, sea cu quis integre pertinax. Ut vitae mucius vix, ei eos meis ludus. Reque facilisis ex mel, sea in tota lobortis disputationi. Sed quas clita saepe te, te mollis vocent sed.</div>

How can I reset active touch-event-listeners inside YouTube embed <iframe>?

tl;dr:
YouTube embedded video <iframe> tags have touch-event-listeners. Active touch-event listeners cause scroll performance issues - AKA jank. I usually manage to fix active touch-event related jank issues by using touch-action: initial in CSS. This does not work for Youtube embedded video <iframe> elements.
Intro:
Kayce Basques - Google techie - writes:
When you scroll a page and there's such a delay that the page doesn't feel anchored to your finger, that's called scroll jank. Many times when you encounter scroll jank, the culprit is a touch event listener.
Touch event listeners are often useful for tracking user interactions
and creating custom scroll experiences, such as cancelling the scroll
altogether when interacting with an embedded Google Map.
Currently,
browsers can't know if a touch event listener is going to cancel the
scroll, so they always wait for the listener to finish before
scrolling the page.
I have found a way to sidestep this with CSS using touch-action
The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser).
If I use touch-action: initial the problem disappears.
If you want to see what causes scroll jank and what does not, examine the screenshot below
Red buttons cause jank while green ones don't. The only differece between the two is that red buttons are set to touch-action: manipulation which makes red buttons actively "listen" and process input before scrolling can proceed
The issue
I embed videos from Youtube. The iframes contain touch event listeners that are active. The method I mentioned above does not work. I don't have access to Youtube code to edit the listeners and set them to passive.
I have tried to narrow down the issue. I have found that the element with the class .html5-video-player has the following CSS
.html5-video-player {
touch-action: manipulation;
}
According to the docs, manipulation can
[...] Enable panning and pinch zoom gestures, but disable additional
non-standard gestures such as double-tap to zoom. Disabling double-tap
to zoom removes the need for browsers to delay the generation of click
events when the user taps the screen. This is an alias for "pan-x
pan-y pinch-zoom" (which, for compatibility, is itself still valid).
and
[...] is also often used to completely disable the delay of click
events caused by support for the double-tap to zoom gesture.
All of which are things I don't need.
Logic says all I need to do is add this to my CSS
.html5-video-player {
touch-action: initial;
}
but that doesn't work, nor does this:
.html5-video-player {
touch-action: initial !important;
}
or this:
.html5-video-player {
touch-action: unset !important;
touch-action: initial !important;
}
or even this:
.html5-video-player {
touch-action: none !important;
}
Even if I try a different approach like:
*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe>*>.html5-video-player,
iframe .html5-video-player {
/* <---- All of these don't work */
touch-action: initial /* and all other variations mentioned above */
}
It still does not work.
For a reference on what it actually looks like on screen examine the screenshot below
Code sandbox:
* {
max-width: 500px;
margin: 1em auto;
text-align: justify
}
button {
color: white !important;
background: green;
}
button:nth-child(odd) {
/* <---- these buttons have active touch event listners and hinder scrolling */
background: red;
touch-action: manipulation
}
*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe .html5-video-player {
/* <---- All of these don't work */
touch-action: initial
}
<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint blandit an sea. Etiam tincidunt his ad, ex assum fabellas deterruisset vix. Usu
ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus usu. Libris
sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et.<button>Button</button> Brute tation sea te, quas temporibus vel an. Nam cu
legere malorum, sea ut<button>Button</button> tollit insolens reformidans. Ut mei vide mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod
vulputate constituam no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id,
in pro case choro. Cum in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam
albucius detraxit usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam,<button>Button</button> eos sonet antiopam
concludaturque ea, eos ei falli oporteat deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur
disputationi, usu dicta veritus in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer
eu mea. Eu qui sonet nusquam molestie, ex dicant <button>Button</button>facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit
ei ius, sit ridens commune conceptam ei. Est purto putent accusamus in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute
vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens, delectus deterruisset eu<button>Button</button> pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis
ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur
comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis
vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret
et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut, eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi
accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse
consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta percipit, et cibo zril clita mel. Quo elitr partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius
et, agam decore conceptam no pro, vide aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus
mediocrem. Ei his tamquam perpetua. Ei epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere,
mea prima tincidunt assueverit at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel. Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et
mei meis inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo.
Volumus recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6h4_-F6jnyk?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint<button>Button</button> blandit an sea. Etiam tincidunt his ad, ex assum fabellas
deterruisset vix. Usu ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus
usu. Libris sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et. Brute tation sea te, quas temporibus vel an. Nam cu legere malorum,
sea ut tollit insolens reformidans. Ut mei vide<button>Button</button> mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod vulputate constituam
no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id, in pro case choro. Cum
in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam albucius detraxit
usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam, eos sonet antiopam concludaturque ea, eos ei falli oporteat
deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur disputationi, usu dicta veritus
in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer eu mea. Eu qui sonet nusquam molestie,
ex dicant facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit ei ius, sit ridens commune conceptam ei. Est purto putent accusamus
in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens,
delectus deterruisset eu pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At
elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex
diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam
delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut,
eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt
nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta
percipit, et cibo<button>Button</button> zril clita mel. Quo elitr<button>Button</button> partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius et, agam decore conceptam no pro, vide
aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus mediocrem. Ei his tamquam perpetua. Ei
epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere, mea prima tincidunt assueverit
at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel.<button>Button</button> Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et mei meis
inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo. Volumus
recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>
Question:
How can I turn off / disable / reset the touch event listener inside a Youtube embed <iframe>?

You can't apply a CSS style to an <iframe> - it's a new document with a new CSS cascade.
Instead you'll need some JS to apply the style property to the new document, and you'll need a CORS header set or host the <iframe> on your own domain.
That done you can manipulate the <iframe> content to include your styles. There are better answers already on here to help with that.
However, even if you can that may not be enough, as YouTube are switching to apply Shadow DOM (they already do if you opted in) in which case the video player itself gets a shadow style tree that you can't access from the <iframe>.
In your snippet you're embedding an <iframe> directly. Instead use the YouTube API to create the player. This exposes player.removeEventListener(), which can remove the janky events and player.getIframe() that gives you access to the frame's DOM directly.
You can also access the player in the creation event:
// Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Once the script has loaded add the player
function onYouTubeIframeAPIReady() {
var player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'ylLzyHk54Z0',
events: {
'onReady': onPlayerReady
}
});
}
// Once the player is ready set its style
function onPlayerReady(event) {
event.target.style.touchAction = 'initial';
}
<div id="player"></div>
Though that snippet has loads of errors due to the preview using a sandbox <iframe> of its own.

Easy way to switch between content with jquery

I just made a script that shows/hides content with Jquery when you click on tabs above the content (it also changes the color of the tab that was clicked). Everything works fine (Result: https://jsfiddle.net/e572s3oq/embedded/result/) but i think there is an other way to switch between the content that makes it easier to add more tabs. I would be really glad if someone could help me. And i hope you understand my intention. (Please excuse my english and ask me if you have any remaining questions)
Here is my Code (I think only the jQuery code is relevant):
$(document).ready(function() {
$(".tab:first-child").click(function() {
$(".content p:nth-child(2)").css('display', 'none');
$(".tab:nth-child(2)").css('background-color', '#F5F7F7');
$(".tab:first-child").css('background-color', 'white');
$(".content p:first-child").css('display', 'block');
});
$(".tab:nth-child(2)").click(function() {
$(".content p:first-child").css('display', 'none');
$(".tab:first-child").css('background-color', '#F5F7F7');
$(".tab:nth-child(2)").css('background-color', 'white');
$(".content p:nth-child(2)").css('display', 'block');
});
});
body,
html {
padding: 0;
margin: 0;
background-color: #ecf0f1;
}
#wrapper {
width: 260px;
margin: auto;
margin-top: 100px;
}
.tab {
width: 130px;
height: 30px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #7f8c8d;
display: block;
float: left;
}
.tab:hover {
cursor: pointer;
}
.tab:first-child {
background-color: white;
}
.tab:nth-child(2) {
background-color: #F5F7F7;
}
.content {
width: 260px;
height: 300px;
background-color: white;
overflow: scroll;
}
.content p {
color: #7f8c8d;
font-size: 12px;
font-family: 'Lato', sans-serif;
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
}
.content p:first-child {
display: block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">
PAGE 1
</div>
<div class="tab">
PAGE 2
</div>
<div class="content">
<p>Content1</p>
<p>Content2</p>
</div>
</div>

This should do:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
What basically is happening is:
We first, by default, hide all the p elements within the .content div.
We also set background-color to #F5F7F7 for all the .tab elements.
Then, you can target the current .tab element by the use of $(this) and set its background-color to white.
Finally, we can target a particular p element within .content div by using the current .index() of the current .tab element and then we feed this .index() to another method of jQuery called .eq() which then gets us the desired p element.
Snippet:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
body, html {
padding:0;
margin:0;
background-color:#ecf0f1;
}
#wrapper {
width:260px;
margin: auto;
margin-top:100px;
}
.tab {
width:84px;
height:30px;
font-family:'Lato', sans-serif;
font-size:14px;
line-height: 30px;
text-align: center;
color:#7f8c8d;
display: block;
float: left;
background-color: #F5F7F7;
}
.tab:hover { cursor:pointer; }
.tab:first-child { background-color: white; }
.content {
width:260px;
height:300px;
background-color:white;
overflow: scroll;
}
.content p {
color:#7f8c8d;
font-size: 12px;
font-family:'Lato', sans-serif;
margin-top:8px;
margin-left:8px;
margin-right:8px;
margin-bottom:5px;
}
.content p:first-child {
display:block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">PAGE 1</div>
<div class="tab">PAGE 2</div>
<div class="tab">PAGE 3</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
<p>Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel.</p>
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
</div>
</div>
Modified a few styles in CSS and added more content in HTML for the above snippet. Hope this helps.