need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown. would appreciate all the help I could get.

( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)

Thank you Falkon

need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown. would appreciate all the help I could get.

( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)

Thank you Falkon

• javascript
• jquery
• html
• twitter-bootstrap
• iframe

• 1 Hi, wele to StackOverflow. Could you post the relevant code snippet you have already? – Tomanow Commented Nov 15, 2014 at 12:52

2 Answers 2

Try this as you have jquery tagged.

$(function() { 
    var videos  = $(".video");
 
        videos.on("click", function(){
            var elm = $(this),
                conts   = elm.contents(),
                le      = conts.length,
                ifr     = null;
 
            for(var i = 0; i<le; i++){
              if(conts[i].nodeType == 8) ifr = conts[i].textContent;
            }
 
            elm.addClass("player").html(ifr);
            elm.off("click");
        });
});

.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }
.video:after { content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } 
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
/* image poster clicked, player class added using js */
.video.player img { display: none; }
.video.player:after { display: none; }

<div class="video">
    <img src="poster.jpg">
     <iframe width="940" height="529" src="http://www.youtube./embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

Javascript is not necessary. The poster image is nothing but a background. if the video is empty, then use the poster image as a background image

<div
          style={{
            background: `url(${poster}) top center no-repeat; background-size: cover;`
          }}
        >
          <iframe
            src={`https://www.youtube./embed/${embedId}`}
            width="100%"
            height="100%"
            frameborder="0"
            allowfullscreen
          />
        </div>