display the pdf file in the html page

I want to display file pdf in the page html,it works well but the problems are Black background showing in PDF and it does not display the full height of the file pdf.

this image to explain the problems.
image

this is my css code

iframe {
    margin: 0px;
    padding: 0px;
    background: blue;
    display: block;
    border: 0px;
    overflow:hidden;
    overflow-x:hidden;
    overflow-y:hidden;
    background-color: #FFF;
    height: 100%;
    width: 100%;
}

html code.

<iframe id="myFrame" ng-src="{{getIframeSrc(ressource.fileName)}}"  >
</iframe>

javascript code

$scope.getIframeSrc = function (videoId) {
    return 'data/Formations/'+$scope.lesondetaille.section.indexurl+'/' + 
            videoId+"#view=fit&toolbar=0&navpanes=0";
};

I tried to add in iframe frameBorder="0" but it does not work.is there any solution to remove background color and embed PDF at full height?.

thank you in advance

9 thoughts on “display the pdf file in the html page”

Leave a Comment