How can I reset active touch-event-listeners inside YouTube embed ?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2017-08-27T05:21:15.413" class="fromnow">Aug 27 '17 at 05:21</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-09-04T08:09:13.857" datetime="2017-09-04T08:09:13.857">Sep 04 '17 at 08:09</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,312 times"> <span class="fc-light mr2">Viewed</span> 1,312 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="45901916" data-ownerid="8157693" data-score="19"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="45901916"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="19">19</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><h2><strong>tl;dr:</strong></h2> <p>YouTube embedded video <code><iframe></code> tags have <strong>touch-event-listeners</strong>. Active touch-event listeners cause <strong>scroll performance issues</strong> - AKA <a class="external-link" href="https://bugs.chromium.org/p/chromium/issues/detail?id=262660" rel="noreferrer"><em>jank</em></a>. I usually manage to fix active touch-event related jank issues by <strong>using</strong> <code>touch-action: initial</code> <strong>in CSS</strong>. This <strong>does not work</strong> for Youtube embedded video <code><iframe></code> elements.</p> <hr/> <h2>Intro:</h2> <p><a class="external-link" href="https://developers.google.com/web/updates/2016/06/passive-event-listeners" rel="noreferrer">Kayce Basques</a> - Google techie - writes:</p> <blockquote> <p>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. </p> <p>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.</p> <p>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.</p> </blockquote> <p>I have found a way to sidestep this with CSS using <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action" rel="noreferrer">touch-action</a></p> <blockquote> <p>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).</p> </blockquote> <p>If I use <code>touch-action: initial</code> the problem disappears. </p> <p>If you want to see what causes scroll jank and what does not, examine the screenshot below</p> <p><a class="external-link" href="https://i.stack.imgur.com/3UyNw.png" rel="noreferrer"><img alt="How to see scroll jank in dev tools" src="../../images/3826977952.webp"/></a></p> <p>Red buttons cause jank while green ones don't. The only differece between the two is that red buttons are set to <code>touch-action: manipulation</code> which makes red buttons actively "listen" and process input before scrolling can proceed</p> <hr/> <p><strong>The issue</strong></p> <p>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 <a href="../../a/37721906#37721906">set them to passive</a>.</p> <p>I have tried to narrow down the issue. I have found that the element with the class <code>.html5-video-player</code> has the following CSS</p> <pre><code>.html5-video-player { touch-action: manipulation; } </code></pre> <p>According to <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation" rel="noreferrer">the docs</a>, <code>manipulation</code> can</p> <blockquote> <p>[...] 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).</p> </blockquote> <p>and </p> <blockquote> <p>[...] is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.</p> </blockquote> <p>All of which are things I don't need.</p> <p>Logic says all I need to do is add this to my CSS</p> <pre><code>.html5-video-player { touch-action: initial; } </code></pre> <p>but that doesn't work, nor does this:</p> <pre><code>.html5-video-player { touch-action: initial !important; } </code></pre> <p>or this:</p> <pre><code>.html5-video-player { touch-action: unset !important; touch-action: initial !important; } </code></pre> <p>or even this:</p> <pre><code>.html5-video-player { touch-action: none !important; } </code></pre> <p>Even if I try a different approach like:</p> <pre><code>>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 / } </code></pre> <p>It still does not work. </p> <hr/> <p>For a reference on what it actually looks like on screen examine the screenshot below</p> <p><a class="external-link" href="https://i.stack.imgur.com/Ya3FU.png" rel="noreferrer"><img alt="Image of what Youtube iframe touch even listener looks like in dev tools" src="../../images/3809283170.webp"/></a></p> <h2>Code sandbox:</h2> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code> { 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 }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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&amp;controls=0&amp;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></code></pre> </div> </div> <hr/> <h2>Question:</h2> <p><strong>How can I turn off / disable / reset the touch event listener inside a Youtube embed</strong> <code><iframe></code>?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/youtube-api" class="post-tag js-gps-track" title="show questions tagged 'youtube-api'" rel="tag">youtube-api</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Sep 04 '17 at 08:09">edited Sep 04 '17 at 08:09</time> <a href="../../users/1685157/paolo-forgia" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1685157.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Paolo Forgia" /> </a> <div class="s-user-card--info"> <a href="../../users/1685157/paolo-forgia" class="s-user-card--link">Paolo Forgia</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,572</li> <li class="s-award-bling s-award-blinggold" title="8 gold badges">8</li> <li class="s-award-bling s-award-blingsilver" title="46 silver badges">46</li> <li class="s-award-bling s-award-blingbronze" title="58 bronze badges">58</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 27 '17 at 05:21">asked Aug 27 '17 at 05:21</time> <a href="../../users/8157693/i-haz-kode" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8157693.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="I haz kode" /> </a> <div class="s-user-card--info"> <a href="../../users/8157693/i-haz-kode" class="s-user-card--link">I haz kode</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,587</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="19 silver badges">19</li> <li class="s-award-bling s-award-blingbronze" title="39 bronze badges">39</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-45901916" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="45901916" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-78828099" class="comment js-comment " data-comment-id="78828099" data-comment-owner-id="2550659" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment78828099_45901916"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">i think it's not possible unless you host the iframe yourself: https://stackoverflow.com/questions/1962707/how-to-give-style-to-iframed-page-content-using-parent-pages-css or https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe .</span> – <a href="../../users/2550659/emanuele-parisio" title="1,192 reputation" class="comment-user ">Emanuele Parisio</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/45901916/how-can-i-reset-active-touch-event-listeners-inside-youtube-embed-iframe#comment78828099_45901916"><span title="2017-08-29T09:10:30.670 License: CC BY-SA 3.0" class="relativetime-clean">Aug 29 '17 at 09:10</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="45938281"></a> <div id="answer-45938281" class="answer accepted-answer" data-answerid="45938281" data-ownerid="905" data-score="7" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="45938281"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can't apply a CSS style to an <code><iframe></code> - it's a new document with a new CSS cascade.</p> <p>Instead you'll need some JS to apply the style property to the new document, and you'll need a <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS" rel="noreferrer">CORS header</a> set or host the <code><iframe></code> on your own domain.</p> <p>That done you can manipulate the <code><iframe></code> content to include your styles. There are <a href="../../questions/217776/how-to-apply-css-to-iframe">better answers</a> already on here to help with that.</p> <p>However, even if you can that may not be enough, as YouTube are switching to apply Shadow DOM (they already do if you <a class="external-link" href="https://www.youtube.com/new" rel="noreferrer">opted in</a>) in which case the video player itself gets a shadow style tree that you can't access from the <code><iframe></code>.</p> <p>In your snippet you're embedding an <code><iframe></code> directly. Instead use the <a class="external-link" href="https://developers.google.com/youtube/iframe_api_reference#Getting_Started" rel="noreferrer">YouTube API</a> to create the player. This exposes <code>player.removeEventListener()</code>, which can remove the janky events and <code>player.getIframe()</code> that gives you access to the frame's DOM directly.</p> <p>You can also access the player in the creation event:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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'; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="player"></div></code></pre> </div> </div> <p>Though that snippet has loads of errors due to the preview using a sandbox <code><iframe></code> of its own.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-08-30T06:25:30.227" class="relativetime">Aug 30 '17 at 06:25</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Keith</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 29 '17 at 11:44">answered Aug 29 '17 at 11:44</time> <a href="../../users/905/keith" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/905.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Keith" /> </a> <div class="s-user-card--info"> <a href="../../users/905/keith" class="s-user-card--link">Keith</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">150,284</li> <li class="s-award-bling s-award-blinggold" title="78 gold badges">78</li> <li class="s-award-bling s-award-blingsilver" title="298 silver badges">298</li> <li class="s-award-bling s-award-blingbronze" title="434 bronze badges">434</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-45938281" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="45938281" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-79093244" class="comment js-comment " data-comment-id="79093244" data-comment-owner-id="8157693" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment79093244_45938281"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This is incredibly insightful and addresses all the issues. Thank you very much keith!</span> – <a href="../../users/8157693/i-haz-kode" title="1,587 reputation" class="comment-user owner">I haz kode</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/45901916/how-can-i-reset-active-touch-event-listeners-inside-youtube-embed-iframe#comment79093244_45938281"><span title="2017-09-06T03:30:25.960 License: CC BY-SA 3.0" class="relativetime-clean">Sep 06 '17 at 03:30</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>