Using CSS to Customize iframe in Notes

Things I have tried

What I’m trying to do

I’m trying to embed a quote from wikiquote to my daily note with iframe
but I need to embed only the part where the quote appear from wikiquote
so I use Css to display only the part i want
you can try to run the code here : Edit fiddle - JSFiddle - Code Playground

<style>
.div1 {
    position: relative;
    width: 624px;
    height: 300px;
    overflow: hidden;
}
.iframe1 {
    position: absolute;            
    top: -350px;
    left: -25px;
    width: 1024px;
    height: 600px;
}
</style>
<div>
<iframe  class="iframe1"
src="https://ar.wikiquote.org/wiki/%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9_%D8%A7%D9%84%D8%B1%D8%A6%D9%8A%D8%B3%D9%8A%D8%A9" scrolling="no" frameborder="no">
</iframe>
</div>

What I’m expecting to see:

What I see:

image