HTML5 Video Player FullScreen Issue

Question

We publish video on Wordpress site. We created a embed codes with iframe. When i open iframed page fullscreen work with normally. But video inside of iframe on page, fullscreen don't work. Because full width and height relative to iframe. What can i do?

Answer 1

It's because when you run the IFrame source in the new tab it doesn't open in the IFrame. when dealing with video that is delivered via iframe. Setting a height is required, otherwise browsers will render the iframe at a static height of 150px, which is far too squat for most video and makes for more Ridiculous and Embarrassing.

Here is what you can do:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
    .videoContainer {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
    }
    .videoContainer iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    </style>
</head>
<body>
    <div class="videoContainer">
        <iframe scrolling="no" width="640" height="360" src="http://video.localhost/embed?video=HLuUyE9-qcA&width=640&yukseklik=360&kali‌te=medium&vidp=11783" style="overflow: hidden;" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.

HTML5 Video Player FullScreen Issue

Question

1 answers

solution1
1 ACCPTED 2014-12-21 19:48:32

HTML5 Video Player FullScreen Issue

Question

1 answers

solution1 1 ACCPTED 2014-12-21 19:48:32

solution1
1 ACCPTED 2014-12-21 19:48:32