How to get this video to show/play in the image?





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!






.tv {
position: relative;
}


.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}

.video {
position: absolute;
top: 25px;
left: 20px;
}

.b {
width: 400px;
height: 300px;
}

 <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>
</div>














share|improve this question





























    0















    I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!






    .tv {
    position: relative;
    }


    .tv img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 550px;
    }

    .video {
    position: absolute;
    top: 25px;
    left: 20px;
    }

    .b {
    width: 400px;
    height: 300px;
    }

     <div class="tv">
    <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

    <div class="video">
    <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>
    </div>














    share|improve this question

























      0












      0








      0


      1






      I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!






      .tv {
      position: relative;
      }


      .tv img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 550px;
      }

      .video {
      position: absolute;
      top: 25px;
      left: 20px;
      }

      .b {
      width: 400px;
      height: 300px;
      }

       <div class="tv">
      <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

      <div class="video">
      <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      </div>
      </div>














      share|improve this question














      I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!






      .tv {
      position: relative;
      }


      .tv img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 550px;
      }

      .video {
      position: absolute;
      top: 25px;
      left: 20px;
      }

      .b {
      width: 400px;
      height: 300px;
      }

       <div class="tv">
      <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

      <div class="video">
      <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      </div>
      </div>










      .tv {
      position: relative;
      }


      .tv img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 550px;
      }

      .video {
      position: absolute;
      top: 25px;
      left: 20px;
      }

      .b {
      width: 400px;
      height: 300px;
      }

       <div class="tv">
      <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

      <div class="video">
      <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      </div>
      </div>







      .tv {
      position: relative;
      }


      .tv img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 550px;
      }

      .video {
      position: absolute;
      top: 25px;
      left: 20px;
      }

      .b {
      width: 400px;
      height: 300px;
      }

       <div class="tv">
      <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />

      <div class="video">
      <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      </div>
      </div>








      javascript html css video embed






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 29 '18 at 6:39









      gofish1234gofish1234

      495




      495
























          4 Answers
          4






          active

          oldest

          votes


















          2














          Use code as below in iframe



          Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:



          <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


          Working code



          Edit to your comment!




          I do not want autoplay. When I take autoplay off, the video will not
          play




          Use z-index to .video



          Working code



          If you want Round edges to video use:



          .video {
          position: absolute;
          top: 25px;
          left: 20px;
          z-index:10;
          border: 4px solid #000;
          border-radius: 15px;
          }


          Working code






          share|improve this answer


























          • I do not want autoplay. When I take autoplay off, the video will not play

            – gofish1234
            Nov 29 '18 at 6:59











          • use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

            – לבני מלכה
            Nov 29 '18 at 7:04











          • see my edit please with rounded edges

            – לבני מלכה
            Nov 29 '18 at 7:12











          • Thank you! The only problem with this is that it doesn't work for mobile view?

            – gofish1234
            Nov 29 '18 at 7:17











          • what doesnot work the z-index or ?autouplay ???

            – לבני מלכה
            Nov 29 '18 at 7:18





















          0














          This code is very simple and understandable with a little CSS knowledge
          In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
          And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
          Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.



          The following links can help you:



          positioning in css



          iframe tag html






          share|improve this answer































            0














            please remove position: absolute; Then Run Your Code






            share|improve this answer
























            • When I remove it, the video is no longer inside the tv image.

              – gofish1234
              Nov 29 '18 at 7:01











            • Then you Remove It Then Minimize Video Size And Adjust z-index value

              – Dilip Shekhawat
              Nov 29 '18 at 7:07



















            0














            The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.



            Also, as far as I know videos are no longer allowed to just auto-play, unless muted.






            share|improve this answer


























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53533197%2fhow-to-get-this-video-to-show-play-in-the-image%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              4 Answers
              4






              active

              oldest

              votes








              4 Answers
              4






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              2














              Use code as below in iframe



              Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:



              <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


              Working code



              Edit to your comment!




              I do not want autoplay. When I take autoplay off, the video will not
              play




              Use z-index to .video



              Working code



              If you want Round edges to video use:



              .video {
              position: absolute;
              top: 25px;
              left: 20px;
              z-index:10;
              border: 4px solid #000;
              border-radius: 15px;
              }


              Working code






              share|improve this answer


























              • I do not want autoplay. When I take autoplay off, the video will not play

                – gofish1234
                Nov 29 '18 at 6:59











              • use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

                – לבני מלכה
                Nov 29 '18 at 7:04











              • see my edit please with rounded edges

                – לבני מלכה
                Nov 29 '18 at 7:12











              • Thank you! The only problem with this is that it doesn't work for mobile view?

                – gofish1234
                Nov 29 '18 at 7:17











              • what doesnot work the z-index or ?autouplay ???

                – לבני מלכה
                Nov 29 '18 at 7:18


















              2














              Use code as below in iframe



              Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:



              <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


              Working code



              Edit to your comment!




              I do not want autoplay. When I take autoplay off, the video will not
              play




              Use z-index to .video



              Working code



              If you want Round edges to video use:



              .video {
              position: absolute;
              top: 25px;
              left: 20px;
              z-index:10;
              border: 4px solid #000;
              border-radius: 15px;
              }


              Working code






              share|improve this answer


























              • I do not want autoplay. When I take autoplay off, the video will not play

                – gofish1234
                Nov 29 '18 at 6:59











              • use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

                – לבני מלכה
                Nov 29 '18 at 7:04











              • see my edit please with rounded edges

                – לבני מלכה
                Nov 29 '18 at 7:12











              • Thank you! The only problem with this is that it doesn't work for mobile view?

                – gofish1234
                Nov 29 '18 at 7:17











              • what doesnot work the z-index or ?autouplay ???

                – לבני מלכה
                Nov 29 '18 at 7:18
















              2












              2








              2







              Use code as below in iframe



              Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:



              <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


              Working code



              Edit to your comment!




              I do not want autoplay. When I take autoplay off, the video will not
              play




              Use z-index to .video



              Working code



              If you want Round edges to video use:



              .video {
              position: absolute;
              top: 25px;
              left: 20px;
              z-index:10;
              border: 4px solid #000;
              border-radius: 15px;
              }


              Working code






              share|improve this answer















              Use code as below in iframe



              Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:



              <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


              Working code



              Edit to your comment!




              I do not want autoplay. When I take autoplay off, the video will not
              play




              Use z-index to .video



              Working code



              If you want Round edges to video use:



              .video {
              position: absolute;
              top: 25px;
              left: 20px;
              z-index:10;
              border: 4px solid #000;
              border-radius: 15px;
              }


              Working code







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Nov 29 '18 at 7:12

























              answered Nov 29 '18 at 6:49









              לבני מלכהלבני מלכה

              11.1k1927




              11.1k1927













              • I do not want autoplay. When I take autoplay off, the video will not play

                – gofish1234
                Nov 29 '18 at 6:59











              • use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

                – לבני מלכה
                Nov 29 '18 at 7:04











              • see my edit please with rounded edges

                – לבני מלכה
                Nov 29 '18 at 7:12











              • Thank you! The only problem with this is that it doesn't work for mobile view?

                – gofish1234
                Nov 29 '18 at 7:17











              • what doesnot work the z-index or ?autouplay ???

                – לבני מלכה
                Nov 29 '18 at 7:18





















              • I do not want autoplay. When I take autoplay off, the video will not play

                – gofish1234
                Nov 29 '18 at 6:59











              • use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

                – לבני מלכה
                Nov 29 '18 at 7:04











              • see my edit please with rounded edges

                – לבני מלכה
                Nov 29 '18 at 7:12











              • Thank you! The only problem with this is that it doesn't work for mobile view?

                – gofish1234
                Nov 29 '18 at 7:17











              • what doesnot work the z-index or ?autouplay ???

                – לבני מלכה
                Nov 29 '18 at 7:18



















              I do not want autoplay. When I take autoplay off, the video will not play

              – gofish1234
              Nov 29 '18 at 6:59





              I do not want autoplay. When I take autoplay off, the video will not play

              – gofish1234
              Nov 29 '18 at 6:59













              use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

              – לבני מלכה
              Nov 29 '18 at 7:04





              use z-index: 10; to .video:jsfiddle.net/uq27ohgj/1

              – לבני מלכה
              Nov 29 '18 at 7:04













              see my edit please with rounded edges

              – לבני מלכה
              Nov 29 '18 at 7:12





              see my edit please with rounded edges

              – לבני מלכה
              Nov 29 '18 at 7:12













              Thank you! The only problem with this is that it doesn't work for mobile view?

              – gofish1234
              Nov 29 '18 at 7:17





              Thank you! The only problem with this is that it doesn't work for mobile view?

              – gofish1234
              Nov 29 '18 at 7:17













              what doesnot work the z-index or ?autouplay ???

              – לבני מלכה
              Nov 29 '18 at 7:18







              what doesnot work the z-index or ?autouplay ???

              – לבני מלכה
              Nov 29 '18 at 7:18















              0














              This code is very simple and understandable with a little CSS knowledge
              In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
              And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
              Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.



              The following links can help you:



              positioning in css



              iframe tag html






              share|improve this answer




























                0














                This code is very simple and understandable with a little CSS knowledge
                In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
                And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
                Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.



                The following links can help you:



                positioning in css



                iframe tag html






                share|improve this answer


























                  0












                  0








                  0







                  This code is very simple and understandable with a little CSS knowledge
                  In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
                  And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
                  Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.



                  The following links can help you:



                  positioning in css



                  iframe tag html






                  share|improve this answer













                  This code is very simple and understandable with a little CSS knowledge
                  In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
                  And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
                  Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.



                  The following links can help you:



                  positioning in css



                  iframe tag html







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 29 '18 at 6:47









                  Arman BagheriArman Bagheri

                  1479




                  1479























                      0














                      please remove position: absolute; Then Run Your Code






                      share|improve this answer
























                      • When I remove it, the video is no longer inside the tv image.

                        – gofish1234
                        Nov 29 '18 at 7:01











                      • Then you Remove It Then Minimize Video Size And Adjust z-index value

                        – Dilip Shekhawat
                        Nov 29 '18 at 7:07
















                      0














                      please remove position: absolute; Then Run Your Code






                      share|improve this answer
























                      • When I remove it, the video is no longer inside the tv image.

                        – gofish1234
                        Nov 29 '18 at 7:01











                      • Then you Remove It Then Minimize Video Size And Adjust z-index value

                        – Dilip Shekhawat
                        Nov 29 '18 at 7:07














                      0












                      0








                      0







                      please remove position: absolute; Then Run Your Code






                      share|improve this answer













                      please remove position: absolute; Then Run Your Code







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 29 '18 at 6:51









                      Dilip ShekhawatDilip Shekhawat

                      399




                      399













                      • When I remove it, the video is no longer inside the tv image.

                        – gofish1234
                        Nov 29 '18 at 7:01











                      • Then you Remove It Then Minimize Video Size And Adjust z-index value

                        – Dilip Shekhawat
                        Nov 29 '18 at 7:07



















                      • When I remove it, the video is no longer inside the tv image.

                        – gofish1234
                        Nov 29 '18 at 7:01











                      • Then you Remove It Then Minimize Video Size And Adjust z-index value

                        – Dilip Shekhawat
                        Nov 29 '18 at 7:07

















                      When I remove it, the video is no longer inside the tv image.

                      – gofish1234
                      Nov 29 '18 at 7:01





                      When I remove it, the video is no longer inside the tv image.

                      – gofish1234
                      Nov 29 '18 at 7:01













                      Then you Remove It Then Minimize Video Size And Adjust z-index value

                      – Dilip Shekhawat
                      Nov 29 '18 at 7:07





                      Then you Remove It Then Minimize Video Size And Adjust z-index value

                      – Dilip Shekhawat
                      Nov 29 '18 at 7:07











                      0














                      The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.



                      Also, as far as I know videos are no longer allowed to just auto-play, unless muted.






                      share|improve this answer






























                        0














                        The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.



                        Also, as far as I know videos are no longer allowed to just auto-play, unless muted.






                        share|improve this answer




























                          0












                          0








                          0







                          The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.



                          Also, as far as I know videos are no longer allowed to just auto-play, unless muted.






                          share|improve this answer















                          The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.



                          Also, as far as I know videos are no longer allowed to just auto-play, unless muted.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Nov 29 '18 at 7:49

























                          answered Nov 29 '18 at 7:20









                          Kayla LampKayla Lamp

                          115




                          115






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53533197%2fhow-to-get-this-video-to-show-play-in-the-image%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Lallio

                              Unable to find Lightning Node

                              Futebolista