1

I have a problem with a video embed from youtube which is not showing me the thumb.

I'm trying to overwrite the css of .ytp-cued-thumbnail-overlay-image this class is located within the iframe of YouTube.

I try to use jquery but I have a security error. Any viable solution?

enter image description here

I am using the following jquery, but I'm not necessarily closed to using jquery, I can take another path if necessary:

jQuery(document).ready(function(){  
    $('iframe.video-force-thumb').on("load",function(){
        $('iframe.video-force-thumb').contents().find('head').append("<style>.my-class2{display:none;} </style>");

    });
});

and I'm getting the following error in my console:

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://flowstobay.org" from accessing a cross-origin frame.

enter image description here

Some solution for this?

yorchp
  • 93
  • 2
  • 10
  • I think you can find a answer here : https://stackoverflow.com/questions/44673660/how-can-i-change-my-iframe-video-background-image – SKJ Dec 28 '17 at 05:04
  • i am not sure whether we can write any css for elements inside youtube iframe..A soultion for this will be like you can use a custom thumbnail(any image), where the custom thumbnail will be placed over the youtube iframe.When you click the thumbnail, the thumbnail will be removed and you can add auto play to youtube video src by ?autoplay=1...you can this implementaion in http://www.juliebergan.no/#videos... – Aravind S Dec 28 '17 at 05:10
  • I'm Using Youtube Api and generate the playerVideo by js – yorchp Dec 28 '17 at 13:49

1 Answers1

0

I use a delay to show the div of thumbnail and the thumb from youtube loads correctly.

  $(document).ready(function() {
    $('#youTubePlayer').hide();
    setTimeout(function() {
      $("#youTubePlayer").show(400);
    }, 4000);
  });
yorchp
  • 93
  • 2
  • 10