Mon. Oct 2nd, 2023

[ANSWERED] javascript – Hide related videos in youtube iframe

By

Nov 19, 2022 html, iframe, javascript, youtube-api

Solution 1 :

You are missing the hashtag on the jQuery selector, it should be `$(“#frame_container).

Also, the function .contents() only looks at the immediate children of the jQuery object/s obtained.

From the jQuery documentation:

Given a jQuery object that represents a set of DOM elements, the .contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<div id = "frame-container">
  <iframe id="frame" width="800" height="600" 
    src="https://www.youtube.com/embed/tgbNymZ7vqY">
  </iframe>
  <button onclick="hide_related()">Hide</button>
</div>

<script>
  function hide_related() {
    $("#frame-container").find(".ytp-pause-overlay ytp-scroll-min")
      .css("display", "none");
  }
</script>

Problem :

I’m trying to hide related videos(youtube iframe) but it seems like it doesn’t work.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div id = "frame_container">
<iframe id="frame" width="800" height="600" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
<button onclick="hide_related()">Hide</button>
</div>

<script>
    function hide_related(){
        $("#frame_container").contents().find(".ytp-pause-overlay ytp-scroll-min").css("display", "none");
    }
</script>
</body>
</html>

Comments

Comment posted by Raul Sauco

You are missing the hashtag on the ID, also, where are the related videos in the DOM? The problem probably comes from

Comment posted by Raul Sauco

This question probably needs the

Comment posted by here

Check my another answer which helps you a lot.

By

Related Post

[ANSWERED] html – Child div has an offset border

Nov 20, 2022

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022