2014-11-15 2 views
-1

Имея очень элементарное участие HTML в предыдущем веб-сайте, с которым я был связан, я изучаю HTML и CSS, чтобы иметь возможность больше работать на моем новом веб-сайте.Встраивание проигрывателя Youtube на странице веб-сайта

В настоящее время у меня есть статическое изображение видео Youtube со ссылкой, которая открывает полноэкранный плеер на новой странице, но я бы хотел заменить это статическое изображение встроенным проигрывателем Youtube для воспроизведения видео на моем веб-страница.

Существует несколько мест на веб-странице (http://www.johnpearsesafaris.com/page-news-ls.html#), этот метод используется, но я стараюсь сначала внести изменения в самое верхнее изображение сокола с развёрнутыми крыльями под заголовком «Как они когда-либо снимали это?»

я сначала пошел на сайт YouTube, который объясняет различные варианты встраивания игрока они есть, и решил пойти с IFRAME один, так как я использовал плавающие фреймы в другом месте раньше.

на моей первую попытку, я удалось заставить игрока вставлять себя и видео в игру, но, к сожалению, он напортачил всю оставшуюся часть форматирования на странице. Статические изображения для всех остальных Новостные сообщения ниже нее d и форматирование остальной части страницы вышло из строя.

= Затем я просмотрел ряд различных рекомендаций о том, как это сделать, и провел несколько часов, пытаясь исправить ситуацию, но, похоже, я не могу преодолеть перерыв в форматировании.

То, что я был заменить HTML между рядами 166 и 185 со следующей HTML:

<div class="row"> 
    <div class="loop-posts eight columns"> 
    <div id="div3" class="post-CLASS blog-post-item b30"> 
     <div class="post-heading"> 
     <h2 class="blog-title"><a 
    href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How 
    did they ever film this?</a> </h2> 
     <div class="blog-meta"> <span class="blog-date">FEB 
    2014 <span class="blog-author"><span> 
    By </span><a class="blog-author-tooltip" rel="tooltip" data-original-title="View all posts by TheEditor" href="#">The 
    Editor</a> 
      </span> 
      </span> 
     </div> 
     </div> 
     <div class="blog-thumb-wrapper"> 
     <iframe src="//www.youtube.com/embed/XBEyCr5AoIs" allowfullscreen="" frameborder="0" height="360" width="640"></iframe> 
     </div> 
     <div class="blog-excerpt"> 
     <p>How did they ever film this?</p> 
     </div> 
    </div> 
    </div> 
</div> 

Я надеюсь, что это просто оплошность с моей стороны. Меня действительно путают классы div.

Признаюсь, я не знаю достаточно о них, но наблюдал за несколькими учебными видеороликами и использовал различные источники в отчаянном усилии, чтобы ускориться.

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

ответ

0

Заменить это:

<div class="row"> 
    <div class="loop-posts eight columns"> 
     <div class="post-CLASS blog-post-item b30" id="div3"> 
      <div class="post-heading"> 
       <h2 class="blog-title"><a href= 
       "https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How 
       did they ever film this?</a></h2> 

       <div class="blog-meta"> 
        <span class="blog-date">FEB 2014 <span class= 
        "blog-author">By <a class= 
        "blog-author-tooltip" data-original-title= 
        "View all posts by TheEditor" href="#" rel= 
        "tooltip">The Editor</a></span></span> 
       </div> 
      </div> 

      <div> 
       <iframe frameborder="0" height="360" src= 
       "//www.youtube.com/embed/XBEyCr5AoIs" width="640"></iframe> 
      </div> 

      <div class="blog-excerpt"> 
       <p>How did they ever film this?</p> 
      </div> 
     </div> 
    </div> 
</div> 
Смежные вопросы