Probleem met youtube embed

maandag 11 april 2011 22:38

Acties:

0 Henk 'm!

Topicstarter

Ik heb verschillende site geraadpleegd (o.a. youtube developer) voor de correcte code om een youtube filmpje te embedden op je website. Raar maar waar verschijnt er enkel een wit vak ter grootte van de opgegeven breedte en hoogte.

Met de code hieronder kan je het probleem (al dan niet) nabootsen:

HTML:

<html>
<head>
<title>TESTPAGINA</title>
</head>
<body>
<p><object width="640" height="390"><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/watch?v=2SmmxvHLsKk" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="640" height="390" src="http://www.youtube.com/watch?v=2SmmxvHLsKk" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</body>
</html>

Twitter iCouchPotato

maandag 11 april 2011 22:44

Acties:

0 Henk 'm!

naarden 4ever

Ik snap niet wat je moeilijk doet, want de code voor een youtube filmpje met HTML code staan gewoon onder de video. klik maar eens op insluiten. Maar goed:

code:

<html>
<head>
    <title>YouTube - Watch the Official THE KARATE KID Trailer in HD</title>

    <link  rel="stylesheet" href="http://s.ytimg.com/yt/cssbin/www-embed-vflyu9Igj.css">


  
</head>
<body>
  <div id="watch-longform-ad" class="hid">
    <div id="watch-longform-text">
Advertisement
    </div>
    <div id="watch-longform-ad-placeholder"><img src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" height="60" width="300" /></div>
  </div>

    <div id="embed-holder">
    <div id="watch-player-div" class="flash-player full-frame"></div>
      <div id="video-player" class="html5-video-player" tabindex="0" style="display: none;">
    <div class="video-fallback" style="display: none;">
      Your browser does not currently recognize any of the video formats available.<br>
      <a href="/html5">Click here to visit our frequently asked questions about HTML5 video.</a>
    </div>
    <div id="captions" class="video-captions"><div class="captions-holder"><span id="captions-text" class="hid"></span></div></div>
    <div class="video-content">
      <div class="html5-video-loader html5-center-overlay html5-icon"></div>
          <svg class="html5-big-play-button html5-center-overlay">
            <g opacity="0.4">
              <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M88.34,9.698
                c-1.09-1.04-2.43-1.62-3.92-1.8c-23.061-1.44-46.08-1.44-69.14,0c-1.48,0.18-2.72,0.76-3.84,1.8c-1.09,1.04-1.81,2.27-2.14,3.78
                c-1.05,7.07-1.56,14.17-1.56,21.26c0,7.21,0.51,14.27,1.56,21.34c0.33,1.51,1.05,2.74,2.14,3.779c1.12,1.051,2.36,1.621,3.84,1.801
                c23.06,1.439,46.08,1.439,69.14,0c1.49-0.18,2.83-0.75,3.92-1.801c1.12-1.039,1.77-2.34,2.1-3.819
                C91.46,48.938,92,41.878,92,34.738c0-7.09-0.54-14.16-1.561-21.22C90.109,12.038,89.46,10.818,88.34,9.698z"></path>
            </g>
            <g class="html5-overlay-button-background" opacity="0.8">
              <path d="M88.34,9.698c-1.09-1.04-2.43-1.62-3.92-1.8c-23.061-1.44-46.08-1.44-69.14,0c-1.48,0.18-2.72,0.76-3.84,1.8
                c-1.09,1.04-1.81,2.27-2.14,3.78c-1.05,7.07-1.56,14.17-1.56,21.26c0,7.21,0.51,14.27,1.56,21.34c0.33,1.51,1.05,2.74,2.14,3.779
                c1.12,1.051,2.36,1.621,3.84,1.801c23.06,1.439,46.08,1.439,69.14,0c1.49-0.18,2.83-0.75,3.92-1.801
                c1.12-1.039,1.77-2.34,2.1-3.819C91.46,48.938,92,41.878,92,34.738c0-7.09-0.54-14.16-1.561-21.22
                C90.109,12.038,89.46,10.818,88.34,9.698z"></path>
            </g>
            <path opacity="0.19" fill="#FFFFFF" enable-background="new" d="M88.34,9.698c-1.09-1.04-2.43-1.62-3.92-1.8
              c-23.061-1.44-46.08-1.44-69.14,0c-1.48,0.18-2.72,0.76-3.84,1.8c-1.09,1.04-1.81,2.27-2.14,3.78c-1.05,7.07-1.56,14.17-1.56,21.26
              c0,7.21,1.49,21.949,1.56,21.34c30.89-29.62,44.3-5.48,81.14-42.56C91.51,12.438,89.46,10.818,88.34,9.698z"></path>
            <g class="html5-overlay-button-background" opacity="0.66">
              <polygon fill="#FFFFFF" points="39.32,16.729 39.32,52.798 68.18,34.168"></polygon>
            </g>
          </svg>
      <ul class="html5-context-menu yt-uix-button-menu hid">
        <li>
          <a class="yt-uix-button-menu-item" target="_blank" href="http://www.youtube.com/watch?v=dQw4w9WgXcQ">Save Video As...</a>
        </li>
        <li>
          <a class="yt-uix-button-menu-item" target="_blank" href="/html5">About HTML5</a>
        </li>
      </ul>
    </div>
    <div class="video-controls">
      <img class="html5-watermark html5-stop-propagation html5-icon" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="watermark">
        <div class="html5-progress-bar html5-stop-propagation yt-uix-range-tooltip" data-range-tooltip-format="yt.player.VideoControls.formatTime">
    <div class="html5-scrubber-button html5-progress-item html5-icon"></div>
    <div class="html5-progress-list html5-progress-item">
      <div class="html5-play-progress html5-progress-section"></div>
      <div class="html5-load-progress html5-progress-section"></div>
    </div>
  </div>

      <div class="html5-player-chrome html5-stop-propagation">
        <div class="html5-play-button html5-button html5-control">
          <input type="image" class="html5-icon" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Play/Pause">
        </div>
        <div class="html5-volume-control html5-control yt-uix-tooltip" tabindex="0" title="Mute" data-alt-title="Unmute">
          <div class="html5-volume-button html5-button" data-value="loud">
            <input type="image" class="html5-icon" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" tabindex="-1">
          </div>
          <div class="html5-volume-panel">
            <div class="html5-volume-slider html5-icon"></div>
          </div>
        </div>
        <div class="progress-text html5-control">
          <span class="html5-current-time">00:00</span><span> / </span><span class="html5-duration-time">00:00</span>
        </div>
        <div class="html5-fullscreen-button html5-button html5-control html5-control-right yt-uix-tooltip" data-value="fullscreen" title="Full screen" data-alt-title="Exit full screen">
          <input type="image" class="html5-icon" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Full screen">
        </div>
        <div class="html5-captions-button html5-button-popup-menu html5-control html5-control-right">
          <span class="html5-button-label html5-empty-label">
            <input type="image" class="html5-icon" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="Subtitles">
          </span>
        </div>
        <div class="html5-quality-button html5-button-popup-menu html5-control html5-control-right" title="Quality">
          <span class="html5-button-label">360p</span>
          <ul class="html5-quality-popup-menu html5-popup-menu">
            <li class="html5-popup-menu-item" data-value="1080p">
              1080p <sup>HD</sup>
            </li>
            <li class="html5-popup-menu-item" data-value="720p">
              720p <sup>HD</sup>
            </li>
            <li class="html5-popup-menu-item" data-value="480p">
              480p
            </li>
            <li class="html5-popup-menu-item" data-value="360p">
              360p
            </li>
          </ul>
        </div>
        <div class="html5-speed-button html5-button-popup-menu html5-control html5-control-right" title="Speed">
          <span class="html5-button-label">Normal</span>
          <ul class="html5-speed-popup-menu html5-popup-menu">
            <li class="html5-popup-menu-item" data-value="2.0">
2x Speed
            </li>
            <li class="html5-popup-menu-item" data-value="1.5">
1.5x Speed
            </li>
            <li class="html5-popup-menu-item" data-value="1.0">
Normal Speed
            </li>
            <li class="html5-popup-menu-item" data-value="0.5">
&frac12; Speed
            </li>
            <li class="html5-popup-menu-item" data-value="0.25">
&frac14; Speed
            </li>
          </ul>
        </div>
        <div class="html5-3d-button html5-button-popup-menu html5-control html5-control-right" title="3D">
          <span class="html5-button-label">3D</span>
          <ul class="html5-popup-menu">
            <li class="html5-popup-menu-item">
              <a href="/select_3d_mode">Stereo Mode (change...)</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  </div>

    
    <script  src="//s.ytimg.com/yt/jsbin/www-embed-vfl_Jzxc3.js"></script>

  <script>
    yt.setConfig({
      'USE_HTML5': false,
      'PREFETCH': false,
      'SWF_CONFIG': {"url": "http:\/\/s.ytimg.com\/yt\/swfbin\/watch_as3-vflvORKLE.swf", "min_version": "7", "args": {"iurl": "http:\/\/i3.ytimg.com\/vi\/2SmmxvHLsKk\/hqdefault.jpg", "el": "embedded", "fexp": "906341,901601", "use_fullscreen_popup": "1", "rel": "1", "title": "Watch the Official THE KARATE KID Trailer in HD", "avg_rating": 4.55771759138, "video_id": "2SmmxvHLsKk", "length_seconds": 121, "allow_embed": 1, "enablejsapi": "0", "sk": "uv2fdWQYTxQSt_J52BGXMWSJusBDmFuUC", "allow_ratings": 1, "hl": "en_US", "jsapicallback": "yt.embed.onPlayerReady", "eurl": "", "use_native_controls": false}, "url_v9as2": "http:\/\/s.ytimg.com\/yt\/swfbin\/cps-vflAkmuZF.swf", "params": {"allowscriptaccess": "always", "allowfullscreen": "true", "bgcolor": "#000000"}, "attrs": {"width": "100%", "id": "video-player", "height": "100%"}, "url_v8": "http:\/\/s.ytimg.com\/yt\/swfbin\/cps-vflAkmuZF.swf"},
      'ORIGIN': "*",
      'IS_OPERA_MOBILE': false,
      'IS_HTML5_MOBILE_DEVICE': false
    });
    yt.setMsg({
      'FLASH_UPGRADE': '\n\n\n\n  <div  class=\"yt-alert yt-alert-error yt-alert-player yt-rounded \">\n      <img src=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Alert icon\">\n\n    <div  class=\"yt-alert-content\">\n              You need to upgrade your Adobe Flash Player to watch this video. <br> <a href=\"http:\/\/get.adobe.com\/flashplayer\/\">Download it from Adobe.<\/a>\n\n    <\/div>\n\n  <\/div>\n'
    });

    yt.embed.writeEmbed();
  </script>



</body>
</html>

maandag 11 april 2011 22:45

Acties:

0 Henk 'm!

Zinu

dat is gewoon hoe ik rol

Staat gewoon een code voor op Youtube zelf hoor. Was ik zo achter na een snelle Google search: http://www.htmlgoodies.co...ideo-to-Your-Web-Site.htm

Zo dus:

code:

1	<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/2SmmxvHLsKk" frameborder="0" allowfullscreen></iframe>

[ Voor 30% gewijzigd door Zinu op 11-04-2011 22:46 ]

maandag 11 april 2011 22:48

Acties:

0 Henk 'm!

BWBzz

code:

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/ooegctlBPq8&amp;ap=%2526fmt%3D18&amp;autoplay=0&amp;rel=0&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=0&amp;loop=0" />
<param name="allowFullScreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/ooegctlBPq8&amp;ap=%2526fmt%3D18&amp;autoplay=0&amp;rel=0&amp;fs=1&amp;color1=0x3a3a3a&amp;color2=0x999999&amp;border=0&amp;loop=0" allowfullscreen="true"></embed>
</object>

Hierbij kun je "http://www.youtube.com/v/ooegctlBPq8" vervangen door jouw link naar je youtube-filmpje.
Succes!

maandag 11 april 2011 22:49

Acties:

0 Henk 'm!

tripkip

Topicstarter

Bedankt, de laatste twee werken bij mij wel.
Ik vind het toch bizar dat de code van http://code.google.com/in...be/player_parameters.html
niet werkt...

Nog maals bedankt!

Twitter iCouchPotato

maandag 11 april 2011 23:16

Acties:

0 Henk 'm!

BWBzz

Geen dank, succes ermee!
Trouwens, bij de code die jij had, zit een klein foutje... Als je kijkt naar de 1e "param name":

(<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>)

dan wordt deze geopend met "<param name" en gesloten met "</param>", maar ik mis een ">" na het eerste gedeelte... denk dat het daar mis gaat

maandag 11 april 2011 23:24

Acties:

0 Henk 'm!

Fish

How much is the fish

Anders kijk je onder het filmpje op youtube

Daar staat een knopje "embed" en krijg je de code kant en klaar, en hoef je niks te veranderen

en je kan ook nog een boel opties kant en klaar instellen

[ Voor 16% gewijzigd door Fish op 11-04-2011 23:26 ]

Iperf

maandag 11 april 2011 23:33

Acties:

0 Henk 'm!

BWBzz

Werkt echter niet altijd... Wanneer bijvoorbeeld gebruik gemaakt wordt van CMS Made Simple, verwijdert de CMS de "iframe" automatisch uit de html-code na het opslaan en krijg je ook net als tripkip een wit venster te zien...

dinsdag 12 april 2011 00:08

Acties:

0 Henk 'm!

tripkip

Topicstarter

Fout zat hem in de url.

Zo werkt het niet:

code:

1	http://www.youtube.com/watch?v=2SmmxvHLsKk

Zo wel:

code:

1	http://www.youtube.com/v/2SmmxvHLsKk

Nu ga ik een manier moeten zoeken om ze om te zetten naar het laatste formaat (links komen uit DB).

[ Voor 15% gewijzigd door tripkip op 12-04-2011 00:11 ]

Twitter iCouchPotato

dinsdag 12 april 2011 00:20

Acties:

0 Henk 'm!

Mercatres

Wilde het net voorstellen, zat er vandaag ook een beetje op te vloeken.
Je kan ook gewoon de hash opslaan in de database. Aangezien de rest van de url toch altijd hetzelfde is.

dinsdag 12 april 2011 00:22

Acties:

0 Henk 'm!

tripkip

Topicstarter

code:

<?php
$url = 'http://www.youtube.com/watch?v=wTnChGG2CM0';

parse_str(parse_url($url, PHP_URL_QUERY), $qstring);

echo <<<EOF
<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/{$qstring['v']}&hl=en&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/{$qstring['v']}&hl=en&fs=1"
           type="application/x-shockwave-flash"
           allowscriptaccess="always"
           allowfullscreen="true"
           width="425"
           height="344"></embed>
</object>
EOF;
?>

Twitter iCouchPotato

dinsdag 12 april 2011 08:36

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Het is sowieso aan te raden de iframe-versie te gebruiken. Deze zorgt ook voor een html5-fallback bijvoorbeeld.

Dit staat ook gewoon onder ieder filmpje overigens bij embed (indien beschikbaar).

[ Voor 27% gewijzigd door Bosmonster op 12-04-2011 08:36 ]

Onderwerpen