0

I have an HTML page which has a child HTML which gets generated dynamically. I want to change the styles of few child HTML elements,but I'm not able to access any of the child HTML elements

<!DOCTYPE html>
<html lang="en">
<head>
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="new.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
 <iframe id="cartoonVideo" src="http://www.youtube.com/embed/ABCDEFGH" frameborder="0" allowfullscreen></iframe>

**Child html gets generated here** 

#document
<!DOCTYPE HTML>
<head>
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="new.css">
</head>
<body>
<div class="access"></div>
</body>
</html>


</body>
</html>

How do I access the child HTML div which has class as access. Either through CSS or any JavaScript or JQuery methods?

Paulie_D
  • 95,305
  • 9
  • 106
  • 134
Nikhil Bharadwaj
  • 701
  • 2
  • 15
  • 36
  • 1
    please let us know your goals to do that . like if you want to autoplay this video content than there will be an alternate solution , but if you want to change the content inside this you will have to see **corx orign** problem , it would be tricky. – Technacron Oct 20 '16 at 09:59
  • Probable duplicate - http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Paulie_D Oct 20 '16 at 10:21

1 Answers1

0

use function contents() this returns the html contents inside your iframe

$("#cartoonVideo").contents().find('.access')
Beginner
  • 3,821
  • 3
  • 14
  • 24