loader image
Select Page

Embed PDF Viewer in WordPress

While creating a special theme for a website usoing custom post types with a lot of media attachted it was needed to display pdf-files directly on the browser screen with html, css and javascript creating a custom overlay. I found different options and wanted to keep track of the options in this post.

Object embed

https://stackoverflow.com/questions/9840230/how-to-display-a-pdf-stream-in-a-browser-using-javascript#9840403

Iframe

https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html

Bg image, live video and paralax effects

In this article a growing collection of notes and codes to keep track of visual background options, bg effects and interactive video tactics for future websites. Since last summer i am experimenting with streaming video in plain Javascript. The little amount of code and equipment needed to play with video streams shows how live-video-streaming has become a standard experience in our lives during the past 50 years.

Let’s take some steps back and first look at the basic usage of background-images for html-elements in css and the way to cover the full background.

<div class="bgContain">
    <div class="content"> ... The rest of your content ... </div>
</div>
.bgContain{
background-image: url( 'imagename.ext' ); /* basic image */
background-size: cover; /* fill out */
}

Now for a basic video display in a background:

<div class="vidContain">
    <div class="vid">
        <video> ... </video>
    </div>
    <div class="content"> ... The rest of your content ... </div>
</div>
.vidContain {
    width:300px; height:200px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

(video background source: stackoverflow.com)

To display the video we might need a link to it’s source or we should take care of uploading the video to our own server or website. To manage the video I found a helpfull article about some very common and important digital video knowledge. In the WordPress CMS we can use a basic on video upload to start with.

But wait, my video is 300mb! What now?
Maybe u can use ftp like this?

There is a lot more that i will cover here when time permits to play and research these background options more over.

Bg image, video and paralax effects

In this article some premature notes and codes to become a collection of visual background options and interactive effect tactics for websites.

The basic background-images for an html-element in css

background-image: url( 'imagename.ext' );

and for video display in a background:

<div class="vidContain">
    <div class="vid">
        <video> ... </video>
    </div>
    <div class="content"> ... The rest of your content ... </div>
</div>
.vidContain {
    width:300px; height:200px;
    position:relative;
    display:inline-block;
    margin:10px;
}
.vid {
    position: absolute; 
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: -1;
}    
.content {
    position:absolute;
    top:0; left:0;
    background: black;
    color:white;
}

(video background source: stackoverflow.com)

There is a lot more that i will cover here when time permits to play and research these background options more over.