Добавить изображение перед встроенным видео

Question

Я пытаюсь разместить вышеуказанное изображение для игрока ниже.

Это то, что я получил до сих пор. Я бы хотел, чтобы gif переместился выше встроенного видео, поэтому, когда он воспроизводится, он может начать загрузку.

<div id="video"><img src="images/hand.gif" width="500" height="281" /> 

<iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

Answer 1

В зависимости от того, что вы пытаетесь сделать, вы можете использовать некоторые JS, чтобы скрыть видео до щелчка изображения.

<a href="#" id="video" class="show_hide"> 
    <img src="images/hand.gif" width="500" height="281" /> 
</a> 

<div class="slidingDiv"> 
    <iframe src="http://player.vimeo.com/video/66167649" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</div> 

Убедитесь, что ссылки на JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 

JS

<script type="text/javascript"> 

$(document).ready(function(){ 

     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    $("#video").hide(); 
    }); 

}); 

</script> 

Answer 2

Я кончался выяснить, что случилось. Таким образом, в принципе, вы не можете этого сделать, если не используете JS так же, как вы заявили. Также убедитесь, что видео vimeo в зависимости от того, что вы решите использовать, имеет переменную автовоспроизведения 1, в противном случае, независимо от того, насколько вы совершенны ее; он никогда не будет играть.

<div id="video"><a href="#" id="showVideo"><img src="images/hand.gif" width="647" height="366" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"   type="text/javascript"></script> 

    <script type="text/javascript"> 


    $('#showVideo').click(function() { 
    $('#video').fadeIn().html('<iframe src="http://player.vimeo.com/video/66167649?title=0&amp;byline=0&amp;portrait=0&amp;color=d01e2f&amp;autoplay=1" width="647" height="366" align="middle" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'); 
$("#showVideo").hide() 

    }); 
    </script>