22 November 2012 12:03

Hoe kan ik mijn embed video van plaats veranderen in een HTML5 website?

Ik heb een HTML5 website en heb zojuist een video ingevoegd in mijn website. deze staat op de standaard posite en ik wil hem verplaatsen naar de rechter bovenhoek.

Dan vraag ik dus om de tag daarvoor.

dit is de tag voor het invoegen van de embed video:

Weet jij het antwoord?

/2500

Afbeelding toevoegen

Video toevoegen

Met CSS iframe { plaats hier je positie } Om het netjes te doen zou ik een class geven aan de video bijv. </div> <div class="id-user 1386812-author"> <div class="id-user-avatar"> <img src="/v/static/images/pngie/default_avatar.611b08c79098.png"> </div> <div class="id-user-info"> <span class="id-user-extra">22 November 2012 15:04</span> <ul class="list list-inline list-award"> </ul> </div> </div> <div class="replyOptions"> <div class="message-options"> <ul class="list list-message"> </ul> </div> </div> <div class="replyExtra"> <a title="Vind ik een goed antwoord" data-answer="answer-1386812" data-url="/v/programmeren/390124/embed-video-plaats-veranderen-html5/1386812/thumb_up/" data-timeout="0" data-thumb-allowed="False" class="lrg-btn lrg-btn-thumb-up answer__thumbs_up answer-thumbs not-active"> <div class="thumb-fill hidden"> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 35.9 36.7" xml:space="preserve"><path d="M7 17.5c0-0.3-0.2-0.5-0.5-0.5H0.5C0.2 17 0 17.3 0 17.6v18.6c0 0.3 0.2 0.5 0.5 0.5h5.9c0.3 0 0.5-0.2 0.5-0.5V17.5zM35.9 21.5c0-1.3-0.5-2.1-1-2.6 0.5-0.4 1-1.3 1-2.8 0-2.2-1.9-3.1-2.9-3.2h-8.6c-0.2 0-0.3-0.1-0.4-0.2 -0.2-0.3-0.3-1 0.2-2 1.1-2.6 1.7-4.5 1.7-6C25.8 2.5 24.6 0 22.5 0c-1.1 0-1.2 0.7-1.4 1.3l-0.1 0.4c-0.2 0.9-1.4 3.9-3.5 6.7 -2.2 2.9-3.5 4.7-5.6 8 -1.1 1.7-2.4 2.8-3.9 3.2v14.1h4.5c0.5 0 1 0.1 1.7 0.3 1.5 0.4 3.8 1.1 8.3 1.1 6.8 0 9.9-0.8 10.2-2.7 0.2-1.1 0.1-1.9-0.3-2.6 0.9-0.4 2.4-1.3 2.4-3 0-1.2-0.4-2-0.8-2.4C34.9 24 35.9 23 35.9 21.5z" fill="#C93FBF"></path></svg> <img src="/v/static/images/pngie/btn-thumb-up-fill.afade4366bed.png" class="pngIE"/> </div> </div> <div class="thumb-outline shown "> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 35.9 36.7" xml:space="preserve"><path d="M22.5 35.1c-4.5 0-6.7-0.6-8.3-1.1 -0.7-0.2-1.2-0.3-1.7-0.3H6.4c-0.3 0-0.5-0.2-0.5-0.5V20.4c0-0.3 0.2-0.5 0.5-0.5 2.1 0 4-1.2 5.5-3.5 2.1-3.3 3.4-5.1 5.6-8 2.1-2.7 3.3-5.7 3.5-6.7l0.1-0.4C21.2 0.7 21.4 0 22.5 0c2.2 0 3.3 2.5 3.3 4.8 0 1.5-0.5 3.4-1.7 6 -0.4 1-0.4 1.7-0.2 2 0.1 0.1 0.2 0.2 0.4 0.2h8.6c1 0.1 2.9 0.9 2.9 3.2 0 1.5-0.5 2.3-1 2.8 0.5 0.5 1 1.3 1 2.6 0 1.5-1 2.5-1.7 3 0.4 0.4 0.8 1.2 0.8 2.4 0 1.7-1.5 2.6-2.4 3 0.4 0.7 0.4 1.5 0.3 2.6C32.4 34.3 29.4 35.1 22.5 35.1L22.5 35.1zM7 32.6h5.6c0.6 0 1.2 0.2 2 0.4 1.5 0.4 3.7 1 8 1 7.7 0 9-1.1 9.1-1.8 0.2-1.3 0-1.8-0.5-2.3 -0.1-0.1-0.2-0.3-0.1-0.5 0.1-0.2 0.2-0.3 0.4-0.4 0 0 2.3-0.6 2.3-2.2 0-1.6-0.8-1.9-0.8-2 -0.2-0.1-0.3-0.3-0.4-0.5 0-0.2 0.1-0.4 0.3-0.5 0 0 1.8-0.8 1.8-2.4 0-1.6-1.2-2.1-1.2-2.1 -0.2-0.1-0.4-0.3-0.3-0.5 0-0.2 0.2-0.4 0.4-0.5 0 0 1.1-0.3 1.1-2.2 0-1.9-1.8-2.1-1.9-2.1h-8.5c-0.6 0-1-0.2-1.3-0.7 -0.5-0.7-0.4-1.8 0.1-3C24.2 7.9 24.7 6.1 24.7 4.8c0-1.6-0.7-3.8-2.2-3.8 -0.2 0-0.2 0-0.2 0 0 0 0 0.3-0.1 0.5l-0.1 0.4c-0.2 1-1.5 4.2-3.7 7.1 -2.2 2.9-3.4 4.7-5.5 7.9 -1.6 2.5-3.6 3.8-5.8 4V32.6zM7 32.6 6.4 36.7H0.5C0.2 36.7 0 36.5 0 36.2V17.6c0-0.3 0.2-0.5 0.5-0.5h5.9c0.3 0 0.5 0.2 0.5 0.5v18.6C7 36.5 6.7 36.7 6.4 36.7L6.4 36.7zM1.1 35.6h4.8V18.1H1.1V35.6zM1.1 35.6" fill="#C93FBF"></path></svg> <img src="/v/static/images/pngie/btn-thumb-up-outline.deaec067cad1.png" class="pngIE"/> </div> </div> <span class="thumbs-count">0</span> </a> <a title="Vind ik een slecht antwoord" data-answer="answer-1386812" data-url="/v/programmeren/390124/embed-video-plaats-veranderen-html5/1386812/thumb_down/" data-timeout="0" data-thumb-allowed="False" class="lrg-btn lrg-btn-thumb-down answer__thumbs_down answer-thumbs not-active"> <div class="thumb-fill hidden"> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 35.9 36.7" xml:space="preserve"><path d="M28.9 19.2c0 0.3 0.2 0.5 0.5 0.5h5.9c0.3 0 0.5-0.2 0.5-0.5V0.5C35.9 0.2 35.6 0 35.3 0l-5.9 0c-0.3 0-0.5 0.2-0.5 0.5V19.2zM0 15.2c0 1.3 0.5 2.1 1 2.6C0.5 18.2 0 19 0 20.5c0 2.2 1.9 3.1 2.9 3.2h8.6c0.2 0 0.3 0.1 0.4 0.2 0.2 0.3 0.3 1-0.2 2 -1.1 2.6-1.7 4.5-1.7 6 0 2.3 1.2 4.8 3.3 4.8 1.1 0 1.2-0.7 1.4-1.3l0.1-0.4c0.2-0.9 1.4-3.9 3.5-6.7 2.2-2.9 3.5-4.7 5.6-8 1.1-1.7 2.4-2.8 3.9-3.2V3h-4.5c-0.5 0-1-0.1-1.7-0.3C20.1 2.3 17.8 1.6 13.3 1.6c-6.8 0-9.9 0.8-10.2 2.7C3 5.4 3 6.2 3.4 6.8 2.5 7.2 1 8.1 1 9.8c0 1.2 0.4 2 0.8 2.4C1 12.7 0 13.7 0 15.2z" fill="#C93FBF"></path></svg> <img src="/v/static/images/pngie/btn-thumb-down-fill.685ffa99f0a7.png" class="pngIE"/> </div> </div> <div class="thumb-outline shown "> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 35.9 36.7" xml:space="preserve"><path d="M13.3 1.6c4.5 0 6.7 0.6 8.3 1.1 0.7 0.2 1.2 0.3 1.7 0.3h6.1c0.3 0 0.5 0.2 0.5 0.5v12.8c0 0.3-0.2 0.5-0.5 0.5 -2.1 0-4 1.2-5.5 3.5 -2.1 3.3-3.4 5.1-5.6 8 -2.1 2.7-3.3 5.7-3.5 6.7l-0.1 0.4c-0.1 0.7-0.3 1.4-1.4 1.4 -2.2 0-3.3-2.5-3.3-4.8 0-1.4 0.5-3.4 1.7-6 0.4-1 0.4-1.7 0.2-2 -0.1-0.1-0.2-0.2-0.4-0.2H2.9C1.9 23.6 0 22.8 0 20.5c0-1.5 0.5-2.3 1-2.8C0.5 17.3 0 16.5 0 15.2c0-1.5 1-2.5 1.7-3C1.4 11.8 1 11.1 1 9.8c0-1.7 1.5-2.6 2.4-3 -0.4-0.7-0.4-1.5-0.3-2.6C3.5 2.4 6.5 1.6 13.3 1.6L13.3 1.6zM28.9 4.1h-5.6c-0.6 0-1.2-0.2-2-0.4 -1.5-0.4-3.7-1-8-1 -7.7 0-9 1.1-9.1 1.8C4 5.7 4.2 6.3 4.7 6.7c0.1 0.1 0.2 0.3 0.1 0.5 -0.1 0.2-0.2 0.3-0.4 0.4 0 0-2.3 0.6-2.3 2.2 0 1.6 0.8 1.9 0.8 2 0.2 0.1 0.4 0.3 0.4 0.5 0 0.2-0.1 0.4-0.3 0.5 0 0-1.8 0.8-1.8 2.4 0 1.6 1.2 2.1 1.2 2.1 0.2 0.1 0.4 0.3 0.3 0.5 0 0.2-0.2 0.4-0.4 0.5 0 0-1.1 0.4-1.1 2.2 0 1.9 1.8 2.1 1.9 2.1h8.5c0.6 0 1 0.2 1.3 0.7 0.5 0.7 0.4 1.8-0.1 3 -1.1 2.4-1.6 4.2-1.6 5.5 0 1.6 0.7 3.8 2.2 3.8 0.2 0 0.2 0 0.2 0 0 0 0-0.3 0.1-0.4l0.1-0.4c0.2-1 1.5-4.2 3.7-7.1 2.2-2.9 3.4-4.7 5.5-7.9 1.6-2.5 3.6-3.8 5.8-4V4.1zM28.9 4.1 29.4 0l5.9 0c0.3 0 0.5 0.2 0.5 0.5v18.6c0 0.3-0.2 0.5-0.5 0.5h-5.9c-0.3 0-0.5-0.2-0.5-0.5V0.5C28.9 0.2 29.1 0 29.4 0L29.4 0zM34.8 1.1h-4.8v17.5h4.8V1.1zM34.8 1.1" fill="#C93FBF"></path></svg> <img src="/v/static/images/pngie/btn-thumb-down-outline.da23c7a06e4d.png" class="pngIE"/> </div> </div> <span class="thumbs-count">0</span> </a> <a href="#" title="Reacties" class="lrg-btn lrg-btn-replies showReplies"> <div class="roundNumber"><span>2</span> </div> <span>Reacties</span> </a> </div> </div> </div> </div> <div class="tab-replies column indentLeft hidden tabsView" id="tab-replies"> <div class="box box-answer bg-gv_grijs_1"> <h2>Reacties</h2> <form id="answer__comment-form-1" data-answer_id="1386812" class="answer__comment-form" method="post" action="/v/programmeren/390124/embed-video-plaats-veranderen-html5/comment/answer/1386812/"> <input type='hidden' name='csrfmiddlewaretoken' value='eGjQ9eP2kWvg3G9lMJOpINCNcuVxUEtjDL651q4EyVi2pZ5nnln4GNPE8JXS84qH' /> <div class="input-error hidden"> <span>De reactie moet uit minimaal 10 karakters bestaan</span> </div> <fieldset> <div class="input-element hasLeftover"> <textarea name="text" cols="40" rows="10" placeholder="Plaats hier jouw reactie" maxlength="1000" data-min-length="10" required id="id_text"> </textarea> <span class="input-leftover"> <span class="length-counter"></span>/1000 </span> </div> </fieldset> <div class="input-button float-right"> <button class="btn comment-submit-button"><span>Plaats reactie</span></button> </div> </form> </div> <div class="replyitem" id="1422783"> <div class="replyitem-inner"> <p class="comment-text">Ik ben nieuw in de website branch, maar snap ik het dus goed dat ik: iframe {(positie: bijv right)} en dan moet hij die video aan de rechterkant van het beeldscherm posten? Dat met class begrijp ik niet helemaal trouwens. Klopt het wat ik als voorbeeld gaf? Moet ik die positie niet iframe {"right"}. Miss kan je even als voorbeeld de precieze tag geven ik wil hem dan graag rechts hebben. Doe maar alsof het een nieuwe website is dus dat je kladblok of notepad++ opent en je begint met: <html><br />Dan een random embedd En dan dat frame.<br /></html> Anders snap ik het denk ik niet</p> <div class="id-user id-user-small id-user-under"> <div class="id-user-avatar"> <img src="/v/static/images/pngie/default_avatar.611b08c79098.png"> </div> <div class="id-user-info"> </div> </div> <ul class="list list-replyitem"> <li class="time-stamp-class">22 November 2012 20:03</li> </ul> </div> </div> <div class="replyitem" id="1422784"> <div class="replyitem-inner"> <p class="comment-text">hmm, dan is het handigals je de basis leert kennen van html en css, maar over de embedded video, heb je de website zelf gemaakt of ?, als je de code ergens kan plaatsen waar ik het kan zien dan ken ik je misschien helpen</p> <div class="id-user id-user-small id-user-under"> <div class="id-user-avatar"> <img src="/v/static/images/pngie/default_avatar.611b08c79098.png"> </div> <div class="id-user-info"> </div> </div> <ul class="list list-replyitem"> <li class="time-stamp-class">22 November 2012 20:07</li> </ul> </div> </div> <a href="#" class="btn btn-wide btn-blue cta-close"><span>Verberg reacties</span></a> </div> </div> <div class="is_desktop center" id="c1"></div> </div> <div class="row"> <div class="strossle-widget"></div> </div> </div> <div class="column column-sm-8 column-offset-sm-2 column-md-4 column-offset-md-0 right-column"> <div class="side-box side-box-usermenu side-box-noborder anonymous"> <div class="row"> <div class="column"> <div class="box bg-gv_grijs_1 user-anonymous__block"> <h3>Inloggen</h3> <btn class="btn btn-wide btn_sanoma_account" onclick="javascript:window.location.replace(window.location.origin + '/v/gebruiker/login')"> <span>Inloggen met Mijn Account</span> </btn> <p>Nog geen account? <a href="/v/gebruiker/aanmelden">Registreer je gratis!</a></p> </div> </div> </div> </div> <div id="r1-placeholder"> <div class="m-b-20 center " id="r1"></div> </div> <div class="questionAsk"> <div class="row"> <div class="column"> <div class="box bg-gv_grijs_1"> <h3>Stel zelf een vraag</h3> <p>Ben je op zoek naar het antwoord op die ene vraag die je misschien al tijden achtervolgt?</p> <form id="ask-question-box" method="get" action="/v/vraag/stellen/" data-id-title="#id_title" > <fieldset> <div class="input-element hasLeftover"> <textarea name="title" cols="40" rows="10" placeholder="Stel hier je vraag" data-min-length="10" data-max-length="101" id="id_title" required> </textarea> <span class="input-leftover"> <span id="question-title_len"></span>/100 </span> </div> </fieldset> <div class="input-button float-right"> <button class="btn"><span>Stel je vraag!</span></button> </div> </form> </div> </div> </div> </div> <div class="m-t-15"> <div id="r2"></div> </div> </div> </div> <div class="center" id="h2"></div> </div> <a href="#" id="goToTop"> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 412 412" xml:space="preserve"><path d="M118.6,262l-32.1-32.3L207,109.8l120.5,119.9L295.4,262L207,174.1L118.6,262z"/></svg> <img src="/v/static/images/pngie/arrow-top-wit.9a75eaf36740.png" class="pngIE"/></div> </a> </div> <div class="footer"> <footer> <div class="mainFooter"> <div class="container"> <div class="row"><div class="mainFooter-item"><a target="_blank" href="/v/voorwaarden" >Algemene Voorwaarden</a></div><div class="mainFooter-item"><a target="_blank" href="https://www.startpagina.nl/contact" >Contact</a></div><div class="mainFooter-item"><a target="_blank" href="https://www.startpagina.nl/adverteren" >Adverteren</a></div><div class="mainFooter-item"><a target="_blank" href="/v/huisregels" >Huisregels</a></div></div> </div> </div> <div class="disclaimer"> <div class="container"> <div class="row"> <div class="column column-sm-9 column-md-8"> <a href="/v/" class="logo svgElement"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 71.7 71.7" xml:space="preserve"><path fill="#AD64A5" d="M35.8 4.8c13.7 0 26 9.2 29.8 22.4 2.6 9 1.1 18.5-4.2 26.3 -0.8 1.2-1.1 2.7-0.7 4.1l2 6.8 -7.8-2.1c-0.4-0.1-0.8-0.2-1.2-0.2 -0.8 0-1.7 0.2-2.4 0.6C49 64 46.8 65 44.5 65.6c-2.8 0.8-5.7 1.2-8.7 1.2 -13.7 0-26-9.2-29.8-22.4 -2.3-7.9-1.4-16.3 2.6-23.6 4-7.3 10.6-12.6 18.5-14.9C30 5.2 32.9 4.8 35.8 4.8M35.8 0c-3.3 0-6.7 0.5-10 1.4C6.8 7-4.1 26.9 1.4 45.9 6 61.5 20.3 71.7 35.9 71.7c3.3 0 6.7-0.5 10-1.4 2.8-0.8 5.4-2 7.8-3.4l16 4.3 -4.4-15c5.9-8.6 8-19.6 4.9-30.3C65.7 10.2 51.3 0 35.8 0L35.8 0z"></path><path d="M46.6 55.9c-2.8 0.9-6.7 1.2-9.7 1.2 -14.8 0-17.6-7.2-17.6-20.8 0-7 0.5-16.8 8-20 2.9-1.2 6.5-1.4 9.6-1.4 3 0 6.1 0 9.1 0.4 1.5 0.2 3.1 0.3 3.1 2.1v2.1c0 1.9-0.2 2.9-2.3 2.9 -2.9 0-5.8-0.5-8.6-0.5 -1.8 0-5 0.1-6.7 0.9 -4.3 1.8-3.7 9.7-3.7 13.5 0 4.8-0.4 12.1 5.7 13.3C35 50 36.6 50 38.1 50c1 0 2-0.2 2.9-0.4V38.2h-5.8c-2.7 0-2.6-1.7-2.6-3.7 0-1.9 0.6-2.9 2.6-2.9h11.3c1.8 0 2.6 0.8 2.6 2.6v18.6C49.2 54.7 48.4 55.4 46.6 55.9z"></path></svg><img src="/v/static/images/pngie/goeievraag.afa79c112bc6.png" class="ie"> </a> <p> © 2021 Startpagina Goeievraag B.V.<br> Startpagina.nl - onderdeel van Startpagina Goeievraag B.V. </p> <ul class="footerMenu"><li><a href="https://www.startpagina.nl/privacy-en-cookiebeleid" target="_blank" > Privacy- en cookiebeleid </a></li><li class="sep"></li><li><a href="#" onclick="window._sp_.loadPrivacyManagerModal(477910)" > Cookie-instellingen wijzigen </a></li><li class="sep"></li><li><a href="/v/copyright" target="_blank" > Copyright </a></li><li class="sep"></li><li><a href="/v/disclaimer" target="_blank" > Disclaimer </a></li></ul> </div> <div class="column column-sm-3 column-md-4"> <ul class="social"> <li> <a target="_blank" href="https://www.facebook.com/Startpagina.nl?ref=hl" class="facebook"> <div class="svgElement icon-facebook"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 93 199.3" xml:space="preserve"><path d="M20.1 38.6v27.4H0v33.6h20.1v99.7h41.3V99.6h27.7c0 0 2.6-16.1 3.9-33.7H61.6v-22.9c0-3.4 4.5-8 9-8H93V0H62.4C19.1 0 20.1 33.6 20.1 38.6L20.1 38.6zM20.1 38.6" fill="#27607A"></path></svg><img src="/v/static/images/pngie/icon-facebook.eb1fb91a4c88.png" class="ie"> </div> </a> </li> <li> <a target="_blank" href="https://twitter.com/startpagina" class="twitter"> <div class="svgElement icon-twitter"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 242.4 196.9" xml:space="preserve"><path d="M242.4 23.3c-8.9 4-18.5 6.6-28.6 7.8 10.3-6.1 18.1-15.9 21.9-27.5 -9.6 5.7-20.3 9.8-31.6 12.1C195.1 6 182.2 0 167.8 0c-27.5 0-49.7 22.3-49.7 49.7 0 3.9 0.4 7.7 1.3 11.3C78.1 59 41.4 39.2 16.9 9.1c-4.3 7.3-6.7 15.9-6.7 25 0 17.3 8.8 32.5 22.1 41.4 -8.2-0.3-15.8-2.5-22.5-6.2v0.6c0 24.1 17.2 44.2 39.9 48.8 -4.2 1.1-8.6 1.7-13.1 1.7 -3.2 0-6.3-0.3-9.4-0.9 6.3 19.8 24.7 34.1 46.4 34.5 -17 13.3-38.5 21.3-61.8 21.3 -4 0-8-0.2-11.9-0.7 22 14.1 48.1 22.4 76.2 22.4 91.5 0 141.5-75.8 141.5-141.5l-0.2-6.4C227.3 42 235.8 33.3 242.4 23.3L242.4 23.3zM242.4 23.3" fill="#3C9FCA"/></svg><img src="/v/static/images/pngie/icon-twitter.719be6750b45.png" class="ie"> </div> </a> </li> </ul> </div> </div> </div> </div> </footer> </div> <a href="#" id="go-to-top" class="go-to-top svg-holder"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 412 412" xml:space="preserve"><path style="fill:#FFFFFF;" d="M118.6,262l-32.1-32.3L207,109.8l120.5,119.9L295.4,262L207,174.1L118.6,262z"/></svg><img src="/v/static/images/pngie/up.a0e56ea16947.png" class="ie"> </a> <script src="/v/static/commons.b2316a00f707.js" type="text/javascript"></script> <script src="/v/static/main.fd268254e970.js" type="text/javascript"></script> <script src="/v/static/app-shell/js/secondary_menu.d7919cfc64bb.js" type="text/javascript"></script> <script src="/v/static/question_details.6743ba191f64.js"></script> <script src="/v/static/commercial_post.ad0c2e5c84d7.js"></script> <a href="#" id="goToTop"> <div class="svgElement "> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 412 412" xml:space="preserve"><path d="M118.6,262l-32.1-32.3L207,109.8l120.5,119.9L295.4,262L207,174.1L118.6,262z"></path></svg> <img src="/v/static/images/pngie/arrow-top-wit.9a75eaf36740.png" class="pngIE"> </div> </a> </div> </body> </html>